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

【问题标题】：CSS3 animation running delayed animations with a global delay on all partsCSS3 动画运行延迟动画，所有部分都有全局延迟
【发布时间】：2015-02-06 19:32:52
【问题描述】：

我有一个名为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，然后为其他每个添加0.2s）。问题是我想每 10 秒重复一次。

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

注意：添加infinite 不起作用，因为它只是以1s 的延迟重新启动动画。这不是我想要的解决方案。使用提供的代码尝试一下，并与上面的步骤 1-5 进行比较，您会发现它没有回答问题。

有人知道这种双重环绕动画延迟是否可行？

【问题讨论】：

弗朗西丝卡，你为什么不用关键帧了？
@jbutler483 - 如果我这样做了，但希望它无限运行，那么我将不得不编写一页又一页永无止境的代码......除非我真的很愚蠢？
second snippet here - 使用关键字“无限”
@jbutler483 如果您对提供的代码进行测试，您会发现它不能解决 OP 中发布的问题。无限只是意味着一旦动画开始，它就会继续。我需要的是实现 10 秒的延迟。但是，我还需要以 1 秒的延迟将其拆分。这就是我要问的问题。
请参阅this answer，其中显示了此语法。

标签： css animation keyframe

【解决方案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/

希望对你有帮助。

【讨论】：