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

我有一个名为heartbounce的小型CSS3动画，它使四个图标一个接一个地“反弹”。你可以看到它在这里（注意的jsfiddle只与WebKit的工作，你需要添加自己的供应商名称，看在其他浏览器）CSS3动画在所有部件上运行全局延迟的延迟动画

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秒后反弹。
一旦所有数据都反弹（这是页面加载后的2.6秒），请停止。
等10秒钟。
重复动画。
继续以这种方式...

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

有谁知道这种双重包装动画延迟是否可能？

来源

2015-02-05 Francesca

Francesca，你为什么不再使用关键帧？ – jbutler483 2015-02-05 15:11:00

@ jbutler483 - 如果我这样做了，但希望它无限运行，那么我必须编写永不结束的页面和页面代码......除非我真的很愚蠢？ – Francesca 2015-02-05 15:12:31

[第二个片段在这里]（http://css-tricks.com/snippets/css/keyframe-animation-syntax/） - 使用关键字'infinite' – jbutler483 2015-02-05 15:16:14

你在问这个吗？（该代码可以改善）

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/

希望它能帮助。

来源

2015-02-05 15:40:05 ppascualv

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

回答

相关问题