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動畫在所有部件上運行全局延遲的延遲動畫

回答

相關問題