我的动画属性不能同时工作

Question

我正在尝试一个div的简单动画，当页面加载时它会动画化。您可以在下面看到动画的GIF。

这是代码

@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>

你可以看到它首先增加宽度并调整位置并增加高度（不设置动画）。为什么会这样？我想同时为所有这些属性制作动画。

Answer 1

这种情况正在发生，因为您已将to高度设置为百分比，但高度百分比是继承的;它们仅在父元素具有声明的高度时才起作用。

只有视口具有固有的高度设置，因此如果您想在div上使用height: 80%，那么您还需要在CSS中设置html, body { height: 100%; }。 html元素是视口的子元素，body是html的子元素。这样，您的div height: 80%;就可以通过body和html一直继承到视口。见这个例子：

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不是有效的动画属性。请参阅Mozilla开发人员网络上的有效属性列表here。

P.P.S。如果您希望动画最后保留其状态，则可以使用animation-fill-mode: forwards;。