एक css3 एनीमेशन लूप

Question

पर यादृच्छिक जोड़ें प्रत्येक बार एक css3 एनीमेशन loops मैं शैली में एक चर बदलना चाहता हूँ।

उदाहरण के लिए निम्नलिखित सीएसएस स्क्रीन के ऊपर से नीचे तक पैराशूट के एक समूह चला जाता है: आदर्श रूप में हालांकि

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

, प्रत्येक पाश के अंत में मैं एक यादृच्छिक एक्स में फेंक करना चाहते हैं पद।

समूह की डिफ़ॉल्ट शैली है:

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

तो 70 सेकंड के बाद, मैं -200px और 200px के बीच कहीं भी मार्जिन छोड़ दिया है या छोड़ दिया विशेषता परिवर्तन करना चाहते हैं।

मैं समझता हूँ कि मैं jQuery और हर() के साथ कुछ इस तरह कर सकता है:

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

लेकिन वहाँ js लिए सीएसएस पाश यह करने के लिए टाई करने के लिए एक तरीका है? यानी क्या एनीमेशन के साथ सही सिंकिंग के लिए जेएस किसी भी तरह का रिटर्न कॉल कर सकता है? मुझे डर है कि अगर मैं 70 के टाइमर पर जेएस का उपयोग करता हूं तो क्या होगा, यह समय सही नहीं होगा, और सीएसएस एनीमेशन के माध्यम से आधा रास्ता जेएस अपना टाइम लूप करेगा और पैराशूट आधा जगह के चारों ओर कूदने जा रहे हैं एनीमेशन के माध्यम से रास्ता।

आप इस पर कैसे पहुंचेंगे?

Answer 1

एनीमेशन पूर्ण होने पर CSS3 एनीमेशन में animationEnd ईवेंट निकाल दिया गया है।

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

इस तरह, आप वास्तव में पता है जब एनीमेशन समाप्त होता है और left परिवर्तन को सही ढंग से लागू किया जाता है:

आप अपने एनिमेटेड तत्व इस प्रकार ट्रिगर है कि प्रत्येक एनीमेशन के अंत में left परिवर्तन करने के लिए है कि घटना bind कर सकते हैं।

Answer 2

प्रत्येक नई एनीमेशन पुनरावृत्ति की शुरूआत में 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