CSS3動畫延遲屬性不起作用

我有這段代碼。CSS3動畫延遲屬性不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <title>Rollover Test</title> 
    <style> 
    #one { 
     width: 50px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     left: 1110px; 
     top: 110px; 
     opacity: 1; 
     animation: myfirst 5s; 
     -webkit-animation: myfirst 5s; 
    } 

    @keyframes myfirst 
    { 
     from {opacity: 0; width: 50px; height: 0px;} 
     to {opacity: 1; width: 50px; height: 50px;} 
    } 

    @-webkit-keyframes myfirst 
    { 
     from {opacity: 0; width: 50px; height: 0px;} 
     to {opacity: 1; width: 50px; height: 50px;} 
    } 

    #two { 
     width: 50px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     left: 1110px; 
     top: 200px; 
     opacity: 1; 
     animation: mysecond 5s; 
     animation-delay: 5s; 
     -webkit-animation: mysecond 5s; 
     -webkit=animation-delay: 5s; 
    } 

    @keyframes mysecond 
    { 
     from {opacity: 0; width: 50px; height: 0px;} 
     to {opacity: 1; width: 50px; height: 50px;} 
    } 

    @-webkit-keyframes mysecond 
    { 
     from {opacity: 0; width: 50px; height: 0px;} 
     to {opacity: 1; width: 50px; height: 50px;} 
    } 
</style> 
</head> 
<body> 



<div id="one"></div> 

<div id="two"></div> 

<div id="three"></div> 

<div id="four"></div> 

<div id="five"></div> 



</body> 
</html>

我不能讓mysecond打two，使用animation-delay之前要等待5秒鐘。我基本上希望它是myfirst播放，然後完成，mysecond播放。我已經嘗試了animation: mysecond 5s;和animation-delay: 5s;的順序。

來源

2013-08-16 Mr. Shtuffs

你有一個錯字有：

-webkit=animation-delay 
// ^

所以-webkit-animation速記屬性重寫之前宣佈animation-delay。

修復了錯字，您將在-webkit-animation之後聲明-webkit-animation-delay。

來源

2013-08-16 02:14:03

謝謝，但現在只有「myfirst」播放。 –

@ Mr.Shtuffs - 等待5秒鐘，它就會運行。看到這裏：http://jsfiddle.net/Xj6s2/ –

哦，我明白了，但問題是，我想''兩個''消失之前播放。 –

CSS3動畫延遲屬性不起作用

回答

相關問題