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;
}

有点长，但你明白了。

目前这个动画发生在页面加载时(第一个延迟 1s，然后为其他每个延迟 .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/

希望对您有所帮助。