將隨機添加到css3動畫循環中

每當css3動畫循環時，我想更改樣式中的變量。將隨機添加到css3動畫循環中

例如下面的CSS中刪除組降落傘從頂部到屏幕的底部：

@-webkit-keyframes fall { 
    0% { top: -300px; opacity: 100; } 
    50% { opacity: 100; } 
    100% { top: 760px; opacity: 0; } 
} 

#parachute_wrap { 
    -webkit-animation-name: fall; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 70s; 
    -webkit-animation-timing-function: linear; 
}

理想然而，在每個循環結束時，我想在隨機X扔位置。

組的默認樣式是：

#parachute_wrap { 
    position: absolute; 
    top: -300px; 
    left: 50%; 
    margin-left: 140px; 
}

即70秒後，我想在任何地方改變-200px和200像素之間的差額，左或屬性。

我知道我可以做這樣的事情用jQuery和每次（）：

$('#parachute_wrap').everyTime (70000, function(){ 
    $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

但是，有沒有辦法扳平CSS環路JS做到這一點？即是否有任何類型的回電可供js收聽，以便與動畫完美同步？我擔心，如果我在70年代計時器上使用JS，會發生什麼情況是計時不會同步正確，並且通過css動畫的一半，js將執行其定時循環，並且降落傘將跳到一半通過動畫的方式。

你會如何處理這個問題？

來源

2012-05-15 willdanceforfun

如果同步是你唯一擔心的，你可以在'parachute_wrap' CSS從ID更改爲類，然後將其分配到您想要的元素裏面'$（文件）。就緒（）'事件，在'.ready（）'內部設置你的計時器。可能有一個更簡單的方法，但這是我現在可以想到的。 –

這似乎是[這個問題]的近重複（http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript）。接受的答案似乎提供了一條未來路。 –

當動畫完成時，CSS3動畫會觸發一個animationEnd事件。

您可以在事件bind，從而你的動畫元素觸發，在每個動畫結束left變化：

$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

這樣，你確切地知道當動畫結束，left變化是正確應用。

來源

2012-05-16 00:56:53 Zuul

太酷了。完善。 – willdanceforfun

還有一個animationiteration事件在每一個新的動畫迭代開始發射，即除了第一每次迭代。

$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

http://www.w3.org/TR/css3-animations/#animationiteration

來源

2013-07-05 12:51:15 maiis

將隨機添加到css3動畫循環中

回答

相關問題