How to smoothly stretch div with position absolute? - html

Question

I can't smoothly stretch left-top div to 100vh height and 100vw width.
Box .btn smoothly going as I wanted, but whole background (div .red) has some kind of lag and goes smoothly only in the end.
Any tips, please? :)
#keyframes stretchIn {
0% {
height: 50vh;
width: 50vw;
z-index: 0;
}
100% {
height: 100vh;
width: 100vw;
z-index: 1;
}
}
body {
background: #999;
margin: 0;
padding: 0;
overflow: hidden;
}
body .red,
body .blue,
body .green,
body .yellow {
position: absolute;
z-index: 0;
height: 50vh;
width: 50vw;
}
body .red {
top: 0;
left: 0;
background: #a04951;
transition: 1s;
}
body .red:hover {
animation: stretchIn 5s both;
}
body .red .btn {
position: relative;
width: 50px;
height: 50px;
background: #fff;
top: 45%;
left: 45%;
}
body .blue {
background: #c06c84;
top: 0;
right: 0;
}
body .green {
bottom: 0;
left: 0;
background: #6c5b7b;
}
body .yellow {
bottom: 0;
right: 0;
background: #355c7d;
}
<div class="red">
<div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
Codepen

Answer 1

I'm starting z-index with hover instead of starting with animation.
#keyframes stretchIn {
to {
height: 100vh;
width: 100vw;
}
}
body {
background: #999;
margin: 0;
padding: 0;
overflow: hidden;
}
.red,
.blue,
.green,
.yellow {
position: absolute;
z-index: 0;
height: 50vh;
width: 50vw;
}
.red {
top: 0;
left: 0;
background: #a04951;
}
.red:hover {
animation: stretchIn 5s both;
z-index: 1;
}
.red .btn {
position: relative;
width: 50px;
height: 50px;
background: #fff;
top: 45%;
left: 45%;
}
.blue {
background: #c06c84;
top: 0;
right: 0;
}
.green {
bottom: 0;
left: 0;
background: #6c5b7b;
}
.yellow {
bottom: 0;
right: 0;
background: #355c7d;
}
<div class="red">
<div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

Answer 2

#dgknca is right in a sense of putting your red div to the front. Your div is not lagging, it just starts to stretch behind other divs (note, it comes first in the order, hence is "covered" by elements that come after it). You can either use z-index or change the order of the elements:
#keyframes stretchIn {
0% {
height: 50vh;
width: 50vw;
z-index: 0;
}
100% {
height: 100vh;
width: 100vw;
z-index: 1;
}
}
body {
background: #999;
margin: 0;
padding: 0;
overflow: hidden;
}
body .red,
body .blue,
body .green,
body .yellow {
position: absolute;
z-index: 0;
height: 50vh;
width: 50vw;
}
body .red {
top: 0;
left: 0;
background: #a04951;
transition: 1s;
}
body .red:hover {
animation: stretchIn 5s both;
}
body .red .btn {
position: relative;
width: 50px;
height: 50px;
background: #fff;
top: 45%;
left: 45%;
}
body .blue {
background: #c06c84;
top: 0;
right: 0;
}
body .green {
bottom: 0;
left: 0;
background: #6c5b7b;
}
body .yellow {
bottom: 0;
right: 0;
background: #355c7d;
}
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="red">
<div class="btn"></div>
</div>