CSS3 动画运行延迟动画，所有部分都有全局延迟

Question

我有一个名为 heartbounce 的小 CSS3 动画，它使四个图标 "bounce" 一个接一个地出现。你可以在这里看到它（注意 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 秒，然后为其他每个延迟 .2 秒）。问题是我想每 10 秒重复一次。

页面加载时，图标会在 1 秒后跳动。
一旦全部弹回（自页面加载后为 2.6 秒），停止。
等待 10 秒。
重复动画。
以这种方式继续...

注意：添加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/

希望对您有所帮助。

CSS3 动画运行延迟动画，所有部分都有全局延迟

CSS3 animation running delayed animations with a global delay on all parts

css

animation

keyframe

CSS3 动画 运行 延迟动画，所有部分都有全局延迟

CSS3 animation running delayed animations with a global delay on all parts

css

animation

keyframe

CSS3 动画运行延迟动画，所有部分都有全局延迟