Question

我有一个名为heartbounce的小型CSS3动画，可制作四个图标＆＃34;反弹＆＃34;一个接一个地。你可以在这里看到它（注意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秒后反弹。
一旦全部退回（自页面加载后为2.6秒），请停止。
等待10秒钟。
重复动画。
继续以这种方式......

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

希望它有所帮助。

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

1 个答案: