同步幾個CSS3動畫

我需要能夠很少css3動畫，但我一直在閱讀，它似乎不是很容易。有沒有什麼辦法可以用jQuery來做到這一點？任何人有任何經驗嗎？同步幾個CSS3動畫

基本上我的HTML是這樣的：

<div class="automobiles"></div> 
<div class="airplanes"></div>

而且都使用相同的CSS關鍵幀動畫。當頁面加載完全正常時，兩個動畫都是同步的，但在某些時候，我會刪除飛機div，然後將其附加回去。這點當然可能會發生，動畫不再同步。

所以基本上有反正動畫與jQuery？

非常感謝。我也可以在這裏附上CSS，但我相信它並不是真的需要。

來源

2013-05-20 user2401882

請附上'CSS'和'jQuery'代碼。 – gnerkus

我不認爲有一種簡單的方法可以在任何給定的狀態下同時同步動畫 - 我的意思是，如果您將「飛機」添加回頁面中，而「汽車」動畫只完成一半，那麼那麼你就會陷入困境。除非......

這裏有幾個解決方法：

1）把動畫放到一個類：

.im-animated { animation:customAnim 5s infinite; }

然後切換通過jQuery的onload類，並再次當您添加它切換飛機回到頁面。這樣動畫將重新啓動飛機和汽車。

例如：

var $autos = $('.automobiles'), 
    $planes = $('.airplanes'), 
    $both = $autos.add($planes), 
    animClass = 'im-animated'; 

$(document).one('ready',function(){ 
    $both.addClass(animClass); 
    /* ...more stuff happens here... */ 
    $planes.hide(); 
    /* ...more stuff happens here... */ 
    $both.removeClass(animClass).addClass(animClass).show(); 
});

2）真的不躲.airplanes，而是移動其位置離屏幕：

$planes.css({'position':'absolute','left':'-9999px'});

所以動畫將繼續運行。然後，只需$planes.removeAttr('style');，或以另一種方式將其放回原處。

來源

2013-05-20 13:45:26 Giona

好的，謝謝。我想我是用這些想法來工作的。 – user2401882

不，目前在JavaScript中沒有允許您控制動畫的API。

我們唯一擁有的就是animationStarted這是在動畫啓動時（在支持的瀏覽器上）觸發的事件。除此之外，我們不能真正重新同步動畫，除非我們重新觸發它們，比如刪除一個類並再次添加它。

所以你最好的選擇是在同一時間重新觸發所有的動畫，或以某種方式確定何時最好觸發你的飛機動畫（儘管沒有做到這一點的傻瓜式的方式 - 關閉你可以通過計時你的動畫）。

另外，只是一個想法，你爲什麼要刪除飛機div而不是隱藏它？

來源

2013-05-20 13:43:58 MMM

您可以暫停CSS3動畫：

animation-play-state: paused

CSS3 Animations

來源

2013-05-20 13:45:37 gnerkus

同步幾個CSS3動畫

回答

相關問題