Thêm ngẫu nhiên vào vòng lặp hoạt ảnh css3

Question

Mỗi lần một vòng hoạt ảnh css3 tôi muốn thay đổi một biến trong kiểu.

Ví dụ css sau xuống một nhóm nhảy dù từ trên xuống dưới cùng của màn hình:

@-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; 
} 

Lý tưởng nhất tuy nhiên, ở phần cuối của mỗi vòng lặp Tôi muốn ném vào một ngẫu nhiên X Chức vụ.

Phong cách mặc định của nhóm là:

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

Vì vậy, sau 70 giây, tôi muốn thay đổi thuộc tính margin-left hoặc trái bất cứ nơi nào giữa -200px và 200px.

Tôi hiểu rằng tôi có thể làm một cái gì đó như thế này với jquery và mọi():

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

Nhưng có một cách để buộc các vòng lặp css để js để làm điều này? tức là có cuộc gọi trả về của bất kỳ loại nào mà js có thể lắng nghe để đồng bộ hóa hoàn hảo với hoạt ảnh không? Tôi sợ rằng nếu tôi sử dụng JS trên một bộ đếm thời gian 70 thì điều gì sẽ xảy ra là thời gian sẽ không đồng bộ đúng, và một nửa thông qua hoạt hình css, js sẽ thực hiện vòng lặp theo thời gian của nó và nhảy dù xung quanh vị trí thông qua các hình ảnh động.

Bạn sẽ tiếp cận điều này bằng cách nào?

Answer 1

Hoạt ảnh CSS3 có sự kiện animationEnd được kích hoạt khi hoạt ảnh hoàn tất.

Bạn có thể bind sự kiện đó để yếu tố hoạt hình của bạn do đó gây ra mà left thay đổi ở phần cuối của mỗi hình ảnh động:

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

Bằng cách này, bạn biết chính xác khi các hình ảnh động kết thúc và left thay đổi được áp dụng một cách chính xác.

Answer 2

Ngoài ra còn có sự kiện animationiteration được kích hoạt vào đầu mỗi lần lặp lại hoạt ảnh mới, tức là mỗi lần lặp lại trừ lần lặp đầu tiên.

$('#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