CSS3 свойство animation-delay не работает

У меня есть этот код.

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


html css css-animations
person Mr. Shtuffs    schedule 16.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас там опечатка:

-webkit=animation-delay
//     ^

Таким образом, сокращенное свойство -webkit-animation переопределяет свойство animation-delay, объявленное до этого.

Исправьте опечатку, и -webkit-animation-delay будет объявлено после -webkit-animation.

person Joseph Silber    schedule 16.08.2013
comment
Спасибо, но сейчас играет только myfirst. - person Mr. Shtuffs; 16.08.2013
comment
@Mr.Shtuffs - Подождите 5 секунд, и он запустится. См. здесь: jsfiddle.net/Xj6s2 - person Joseph Silber; 16.08.2013
comment
О, понятно, но проблема в том, что я хочу, чтобы two исчезло до того, как оно проиграет. - person Mr. Shtuffs; 16.08.2013
comment
Но потом я хочу, чтобы он остался на 1 после этого. - person Mr. Shtuffs; 16.08.2013
comment
@Mr.Shtuffs. Затем оставьте значение 1, удалите задержку, установите скорость 10s и добавьте еще один ключевой кадр: jsfiddle.net/Xj6s2/2 - person Joseph Silber; 16.08.2013