Question

我有这段代码。

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

的顺序

Answer 1

你有一个错字：

-webkit=animation-delay
//     ^

因此-webkit-animation速记属性会覆盖之前声明的animation-delay。

修正拼写错误，您将-webkit-animation-delay之后宣布-webkit-animation。

CSS3动画延迟属性不起作用

1 个答案: