CSS3动画在所有部件上运行全局延迟的延迟动画

Question

我有一个名为heartbounce的小型CSS3动画，它使四个图标一个接一个地“反弹”。你可以看到它在这里（注意的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秒，然后每个其他加入0.2秒）。问题是我想每10秒重复一次。

1. 当页面加载时，图标在1秒后反弹。
2. 一旦所有数据都反弹（这是页面加载后的2.6秒），请停止。
3. 等10秒钟。
4. 重复动画。
5. 继续以这种方式...

注：添加infinite不起作用，因为它只是重新开始与1秒的延迟动画。这不是我追求的解决方案。使用提供的代码尝试一下，并与上面的步骤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/

希望它能帮助。