0

I have this code.

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

I cannot get mysecond to wait 5 seconds before playing on two, using animation-delay. I basically want it to be that myfirst plays, then after it is done, mysecond plays. I have experimented with the order of the animation: mysecond 5s; and animation-delay: 5s;.

4

1 回答 1

1

You have a typo there:

-webkit=animation-delay
//     ^

So the -webkit-animation shorthand property is overriding the animation-delay declared before that.

Fix the typo, and you'll have -webkit-animation-delay declared after -webkit-animation.

于 2013-08-16T02:14:03.203 回答