用javascript重複css動畫一次

爲什麼我不能用javascript重複一次CSS動畫？用javascript重複css動畫一次

小提琴：http://jsfiddle.net/6XtSa/

來源

2011-12-08 Tyilo

無法看到任何動畫！ – Kangkan

@TJ它在Chrome中也可以工作，但是我相信，但是在其他瀏覽器中，如firefox和opera分別帶-mozzila和-o前綴，如果我正確記得 – Luke

@BubbaWoop我已刪除我的評論。你是對的，這是有道理的，因爲Chrome也由webkit引擎提供支持。 –

下面是一個從刪除的答案改編而來的例子，它建議使用類。這個答案並不完全正確，因爲它運行無限。

這樣做是爲了增加對click類並刪除它時animationend事件觸發：

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

#button.animating { 
    -webkit-animation-name: rotate; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 1s; 
}

var btn = document.getElementById('button'); 

btn.addEventListener('click', function() { 
    this.className = 'animating'; 
}); 
btn.addEventListener('webkitAnimationEnd', function(){ 
    this.className = ''; 
});

http://jsfiddle.net/AndyE/9LYAT/

來源

2011-12-08 09:26:02

是的，我刪除了因爲我誤解了問：我認爲他想要一個無限的動畫（咖啡還沒有踢過：P） – stecb

@stecb：我認爲你是在正確的路線。使用類保持整潔，海事組織。 –

的按鈕僅旋轉一次的原因是因爲它的旋轉到和不受 360°。這是絕對的價值。要再次旋轉，您必須從360°旋轉至720°。你可能想看看這篇文章：Rotating a Div Element in jQuery ，具體這個的jsfiddle在其中一個答案：http://jsfiddle.net/uLrVy/

來源

2011-12-08 08:41:14

我如何重置，所以我不必用javascript做動畫？ – Tyilo

你可以嘗試這樣的事情：http://jsfiddle.net/6tZd3/

按照Safari CSS Visual Effects Guide你可以只聽webkitTranstionEnd事件通知動畫已完成。此時，您可以重新設置動畫，而無需使用JavaScript進行動畫製作。

來源

2011-12-08 09:09:04 martineno

小提琴在我的鍍鉻中似乎不起作用。 – Tyilo

奇怪。它適用於我的Mac OS X上的Chrome 15.0.874.121。不知道可能發生了什麼。 – martineno

用javascript重複css動畫一次

回答

相關問題