CODEWITHSUNDEEP
csscss-animations
Skyyy
Skyyy

Reputation: 1569

My animation properties are not working simultaneously

I am trying a simple animation of div which animates when page loads. Below you can see the GIF of the animation.

enter image description here

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.

Upvotes: 1

Views: 64

Answers (1)

TylerH
TylerH

Reputation: 21087

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;.

Upvotes: 1

Related Questions