如何做一個環形動畫等使用CSS3

我有以下內容的CSS3動畫：如何做一個環形動畫等使用CSS3

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.animated { 
-webkit-animation-name: rotate; 
-webkit-animation-duration: 2.4s; 
-webkit-animation-iteration-count: infinite; 
-webkit-transition-timing-function: ease-in-out; 
}

它完美的作品，嗯......，我想讓它在環路之間等待：
動畫開始，動畫完成，等待（約0.5秒），動畫開始，動畫結束，等待（約0.5秒） ...

PS：我試過-webkit-animation-delay，它不起作用。

任何幫助？

來源

2012-09-07 Cihad Turhan

將0.5秒添加到您的動畫持續時間，然後在您的keyframes中創建一個不會更改旋轉量的額外幀;

@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    } 
    83% { /*2.4/2.9 = 0.827*/ 
    -webkit-transform: rotate(360deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 
.animated { 
... 
-webkit-animation-duration: 2.9s; /*note the increase*/ 
... 
}

小演示：little link。

來源

2012-09-07 11:58:08 Chris

有點「解決方法」到什麼Abody97做：WebKit的動畫小提琴（http://jsfiddle.net/ZVgAu/1/） – alexbusu

美麗的解決方案，爲什麼這沒有立即流入我的腦海？ –

通過JavaScript在元素上禁用指定時間的CSS類可能會解決您的問題。

function delayAnimation() { 
    var animatedEl = document.getElementById('whatever'); 
    animatedEl.className = ''; 
    setTimeout(function() { 
     animatedEl.className = 'animated' 
     setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration 
    }, 500)// wait 0.5s 
}

希望這會有所幫助。

編輯：我更新了這個答案來修復代碼。您可以在jsfiddle上看到完整的工作示例。感謝@Fabrice指出代碼無法正常工作。

來源

2012-09-07 12:00:51 frkn

感謝隊友，很好的解決方法，但我需要用css3來完成。 –

不客氣。當我看到它時，我個人更喜歡@Abody97的答案:) – frkn

您可以使用轉換。例如：

transition: all 0.6s ease-in-out;

其中transition-delay:0.6s;

來源

2012-09-07 12:33:34 Bimba

如何做一個環形動畫等使用CSS3

回答

相關問題