анимация анимации CSS3 с задержкой анимации с глобальной задержкой на всех частях

Question

У меня есть небольшая анимация CSS3 под названием heartbounce, которая делает четыре значка «отскоком» один за другим. Вы можете увидеть его здесь (обратите внимание JSFiddle работает только с WebKit, вам нужно добавить свой собственный префикс поставщика, чтобы увидеть в других браузерах)

http://jsfiddle.net/franhaselden/92euukf0/5/

img:first-child { 
-webkit-animation-name: heartbounce; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease; 
-webkit-animation-delay: 1s; 
} 
img:nth-child(2) { 
-webkit-animation-name: heartbounce; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease; 
-webkit-animation-delay: 1.2s; 
} 
img:nth-child(3) { 
-webkit-animation-name: heartbounce; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease; 
-webkit-animation-delay: 1.4s; 
} 
img:last-child { 
-webkit-animation-name: heartbounce; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease; 
-webkit-animation-delay: 1.6s; 
} 

Немного долго, но вы получите идею.

В настоящее время эта анимация происходит при загрузке страницы (с задержкой 1 с для первой, а затем добавлением .2s для каждого из остальных). Проблема в том, что я хочу повторять это каждые 10 секунд.

1. При загрузке страницы значки отскакивают через 1 с.
2. Как только все отскочили (это будет 2,6 с момента загрузки страницы), остановитесь.
3. Подождите 10 секунд.
4. Повтор анимации.
5. Продолжайте движение таким образом ...

Примечание: добавление infinite не работает, потому что он просто перезапускает анимацию с 1s задержки. Это решение не для меня. Попробуйте с приведенным кодом и сравните с шагами 1-5 выше, и вы увидите, что он не отвечает на вопрос.

Кто-нибудь знает, возможна ли такая задержка анимации двойного переноса?

Answer 1

Вы просите об этом? (Этот код может быть улучшен)

function change() 
    { 
     document.getElementById('one').style.webkitAnimationName = "heartbounce"; 
     document.getElementById('two').style.webkitAnimationName = "heartbounce"; 
     document.getElementById('three').style.webkitAnimationName = "heartbounce"; 
     document.getElementById('four').style.webkitAnimationName = "heartbounce"; 
    } 

setInterval(function(){ 
    document.getElementById('one').style.webkitAnimationName = "none"; 
    document.getElementById('two').style.webkitAnimationName = "none"; 
    document.getElementById('three').style.webkitAnimationName = "none"; 
    document.getElementById('four').style.webkitAnimationName = "none"; 

    setTimeout(function(){change();}, 0); 
}, 10000); 

http://jsfiddle.net/n0pLcsf0/

Надеется, что это помогает.