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动画延迟属性不起作用

回答

相关问题