анимация CSS3 не синхронизирована

Question

У меня есть анимация ключевого кадра, которая должна изменить цвет div с отметкой 50%, а затем после 2-секундной задержки предполагается анимировать другой div. И еще после этого. И петля вот так.

Но это не работает, как должно. Вместо того, чтобы div запускался один за другим, они запускаются одновременно.

Как это исправить?

div#wifi-waves svg path#w01 { 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 
} 

div#wifi-waves svg path#w02 { 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 

    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

div#wifi-waves svg path#w03 { 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 

    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

div#wifi-waves svg path#w04 { 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 

    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

@-webkit-keyframes colorchnage { 
    0% { fill: #ecf0f1; } 
    50% { fill: rgba(26, 60, 88, 0.9); } 
    100% { fill: #ecf0f1; } 
} 

@keyframes colorchnage { 
    0% { fill: #ecf0f1; } 
    50% { fill: rgba(26, 60, 88, 0.9); } 
    100% { fill: #ecf0f1; } 
} 

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 45" xml:space="preserve" preserveAspectRatio="xMixYMid"> 

    <path id="w04" d=""></path> 

    <path id="w03" d=""></path> 

    <path id="w02" d=""></path> 

    <path id="w01" d=""></path> 

</svg> 

Answer 1

Потому что вы хотите, чтобы каждый элемент анимации один за другим, вы должны сделать уверены, что анимация на первом элементе завершается до того времени, второй начинается. Эффективно, задержка, которую вы добавляете на каждый элемент, - это количество времени, за которое анимация может работать на предыдущем элементе.

Кроме того, элемент, который был анимирован ранее, должен оставаться бездействующим в течение оставшегося времени (пока анимация на других элементах происходит), чтобы он выглядел так, как будто они происходят итеративно. Таким образом, ваша общая продолжительность анимации должна быть равна [Задержка для каждого элемента * Количество элементов].

Здесь вы ожидаете 2-секундную задержку между каждым анимированным элементом и, следовательно, общая продолжительность анимации должна составлять 8 секунд. Кроме того, продолжительность каждого элемента должна быть завершена за 2 секунды (что составляет 25% от 8). Таким образом, ваш код анимации должен выглядеть в следующем фрагменте. (Вопрос SVG не работал, поэтому я скопировал что-то из сети).

div#wifi-waves svg path#w01 { 
 
    -webkit-animation: colorchnage 8s infinite; 
 
    animation: colorchnage 8s infinite; 
 
} 
 
div#wifi-waves svg path#w02 { 
 
    -webkit-animation: colorchnage 8s infinite; 
 
    animation: colorchnage 8s infinite; 
 
    -webkit-animation-delay: 2s; 
 
    animation-delay: 2s; 
 
} 
 
div#wifi-waves svg path#w03 { 
 
    -webkit-animation: colorchnage 8s infinite; 
 
    animation: colorchnage 8s infinite; 
 
    -webkit-animation-delay: 4s; 
 
    animation-delay: 4s; 
 
} 
 
div#wifi-waves svg path#w04 { 
 
    -webkit-animation: colorchnage 8s infinite; 
 
    animation: colorchnage 8s infinite; 
 
    -webkit-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
@-webkit-keyframes colorchnage { 
 
    0% { 
 
    fill: #ecf0f1; 
 
    } 
 
    12.5% { 
 
    fill: rgba(26, 60, 88, 0.9); 
 
    } 
 
    25% { 
 
    fill: #ecf0f1; 
 
    } 
 
} 
 
@keyframes colorchnage { 
 
    0% { 
 
    fill: #ecf0f1; 
 
    } 
 
    12.5% { 
 
    fill: rgba(26, 60, 88, 0.9); 
 
    } 
 
    25% { 
 
    fill: #ecf0f1; 
 
    }

<div id="wifi-waves"> 
 
    <svg width="200px" height="260px" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <path id="w01" d="M10 80 Q 95 10 180 80" stroke="black" fill="#ecf0f1" /> 
 
    <path id="w02" d="M10 120 Q 95 40 180 120" stroke="black" fill="#ecf0f1" /> 
 
    <path id="w03" d="M10 160 Q 95 80 180 160" stroke="black" fill="#ecf0f1" /> 
 
    <path id="w04" d="M10 200 Q 95 120 180 200" stroke="black" fill="#ecf0f1" /> 
 
    </svg> 
 
</div>

Answer 2

CSS не просто читать свойства сверху вниз, задерживая каждый анимации 2s после другого. Вы должны дать первой анимации задержку 0, вторую 2 и так далее.

Ваш код должен выглядеть следующим образом:

div#wifi-waves svg path#w01{ 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 
} 

div#wifi-waves svg path#w02{ 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

div#wifi-waves svg path#w03{ 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 
    -webkit-animation-delay: 4s; 
    animation-delay: 4s; 
} 

div#wifi-waves svg path#w04{ 
    -webkit-animation: colorchnage 1s infinite; 
    animation: colorchnage 1s infinite; 
    -webkit-animation-delay: 6s; 
    animation-delay: 6s; 
}