My animation properties are not working simultaneously - css

Question

I am trying a simple animation of div which animates when page loads. Below you can see the GIF of the animation.
Here is the code
#keyframes newActivity{
to{
position: fixed;
z-index: 100;
top: 18%;
left: 10%;
width:70%;
height:80%;
}
}
.div:first-child {
animation-name:newActivity;
animation-duration:5s;
}
div {
width: 290px;
height:200px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
background-color:red;
border: 1px solid #BCBCBC;
overflow:hidden;
z-index:-10;
}
<div class='div'></div>
You can see that first it increases the width and adjust position and increase the height(Without animating it). Why is this happening? I want to animate all of these properties simultaneously.

Answer 1

This is happening because you have set the to height as a percentage, but height percentages are inherited; they only work when the parent element has a declared height.
Only the viewport has an inherent height set, so if you want to use height: 80% on your div, then you need to also set html, body { height: 100%; } in your CSS. The html element is the child of the viewport, and body is the child of html. This way, your div's height: 80%; can inherit all the way up through body and html to the viewport. See this example:
html, body {
height: 100%;
}
#keyframes newActivity {
to {
position: fixed;
z-index: 100;
top: 18%;
left: 10%;
width: 70%;
height: 80%;
}
}
.div:first-child {
animation-name: newActivity;
animation-duration: 5s;
}
div {
width: 290px;
height: 200px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
background-color: red;
border: 1px solid #BCBCBC;
overflow: hidden;
z-index: -10;
}
<div class="div"></div>
P.S. position is not a valid animation property. See a list of valid properties here on the Mozilla Developer Network.
P.P.S. if you want the animation to retain its state at the end, you can use animation-fill-mode: forwards;.