0

私はこのコードを持っています。

<!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 秒待つことができません。基本的には弾いて、完成したら弾いてほしい。と の順序を試してみました。twoanimation-delaymyfirstmysecondanimation: mysecond 5s;animation-delay: 5s;

4

1 に答える 1