CSS3动画延迟属性不起作用答案

【问题标题】：CSS3 animation-delay Property Not WorkingCSS3动画延迟属性不起作用
【发布时间】：2013-08-16 10:14:03
【问题描述】：

我有这个代码。

<!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 在使用animation-delay 播放two 之前等待5 秒。我基本上希望它是 myfirst 播放，然后在完成后，mysecond 播放。我已经尝试过animation: mysecond 5s; 和animation-delay: 5s; 的顺序。

【问题讨论】：

标签： html css css-animations

【解决方案1】：

你有一个错字：

-webkit=animation-delay
//     ^

所以-webkit-animation 速记属性覆盖了之前声明的animation-delay。

修正错字，您将在-webkit-animation 之后声明-webkit-animation-delay。

【讨论】：

谢谢，但现在只有myfirst 播放。
@Mr.Shtuffs - 等待 5 秒，它会运行。见这里：jsfiddle.net/Xj6s2
哦，我明白了，但问题是我希望two 在它播放之前消失。
但是，之后我希望它保持在 1。
@Mr.Shtuffs - 然后保持为1，去掉延迟，设置速度为10s，并添加另一个关键帧：jsfiddle.net/Xj6s2/2