我的動畫屬性不能同時工作

我想要一個簡單的div動畫，當頁面加載時動畫。在下面你可以看到動畫的GIF。我的動畫屬性不能同時工作

enter image description here

下面是代碼

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

你可以看到，第一它增加了寬度，並調整位置，並且增加高度（無動畫它）。這是爲什麼發生？我想同時動畫所有這些屬性。

來源

2016-01-11 Akash Kumar

我設法通過從動畫中刪除'position'規則來改進它（因爲在動畫結束之後，不會在/之前應用*），並在之前設置默認的「頂部」和「左側」值* *動畫。然而，它仍然是一種混亂。 – JCOC611

Yeap仍然搞砸了。我需要改變動畫的位置。 Thanx我認爲我已經找到了一種方法。順便說一下， –

'position'不是有效的動畫屬性。 – TylerH

發生這種情況是因爲您已將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>

附： position不是有效的動畫屬性。請參閱Mozilla開發者網絡上的有效屬性列表here。

P.P.S.如果您希望動畫在最後保持其狀態，則可以使用animation-fill-mode: forwards;。

來源

2016-01-11 19:31:02 TylerH

我的動畫屬性不能同時工作

回答

相關問題