एकाधिक तत्वों में सीएसएस एनिमेशन को कैसे सिंक करें?

Question

मेरे पास एक पृष्ठ पर दो तत्व हैं जिन्हें मैं सीएसएस (विशेष रूप से, -वेबिट-एनीमेशन) के माध्यम से एनिमेट करना चाहता हूं। एनीमेशन स्वयं केवल एक तत्व ऊपर और नीचे उछालता है। एक तत्व हमेशा दिखाया जाता है और उछालता है, दूसरा माउस-ओवर (होवर) तक एनिमेटेड नहीं होता है।

मेरा प्रश्न है: क्या दूसरे तत्वों की एनीमेशन शुरू होने पर ध्यान दिए बिना दोनों तत्वों में एनीमेशन को सिंक करना संभव है (दोनों तत्व एक ही समय में अपने शीर्ष पर पहुंचते हैं)।

यहाँ मेरी HTML है:

<div id="bouncy01">Drip</div> 
<div id="bouncy02">droP</div> 

और मेरे सीएसएस:

@-webkit-keyframes bounce { 
    0% {-webkit-transform: translateY(0px);} 
    25% {-webkit-transform: translateY(-2px);} 
    50% {-webkit-transform: translateY(-4px);} 
    75% {-webkit-transform: translateY(-2px);} 
    100% {-webkit-transform: translateY(0px);} 
} 
#bouncy01, 
#bouncy02 { 
    margin:10px; 
    float: left; 
    background: #ff0000; 
    padding: 10px; 
    border: 1px solid #777; 
} 
#bouncy01 { 
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate; 
} 
#bouncy02 { 
    background: #ffff00; 
} 
#bouncy02:hover { 
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate; 
} 

और अंत में, इस समस्या का कोई काम कर डेमो: http://jsfiddle.net/7ZLmq/2/

(समस्या, माउस को देखने के लिए पीला ब्लॉक)

Answer 1

मुझे यह संभवतः मूल रूप से नहीं लगता है, लेकिन आप वास्तव में कर सकते हैं एक उछाल वाली आवरण और कुछ स्थिति में फेरबदल का उपयोग करके इसी तरह की सुविधा हैक

एचटीएमएल:

<div id="bouncywrap"> 
    <div id="bouncy01">Drip</div> 
    <div id="bouncy02">droP</div> 
<div> 

सीएसएस:

@-webkit-keyframes bounce { 
    0% { padding-top:1px;} 
/* using padding as it does not affect position:relative of sublinks 
* using 0 instead of 0 b/c of a box-model issue, 
* on kids wiht margin, but parents without margin, just try out 
*/ 
    50% { padding-top:5px;} /*desired value +1*/ 
    100% { padding-top:1px;} 
} 

#bouncy01, 
#bouncy02 { 
    margin:10px; 
    background: #ff0000; 
    padding: 10px; 
    border: 1px solid #777; 
    width:30px; 
     position:absolute; 
} 
#bouncywrap { 
    -webkit-animation:bounce 0.125s ease-in-out infinite; 
    position:relative; 
    width:140px; 
    height:50px; 
/* background:grey; /*debug*/ 
} 
#bouncy02 { 
    background: #ffff00; 
    left:60px; 
    top:2px; /*half of desired value, just a fix for the optic*/ 
} 
#bouncy02:hover { 
    position:relative; /*here happens the magic*/ 
    top:0px; 
} 

डेमो http://jsfiddle.net/A92pU/1/

Answer 2

ऐसा लगता है कि तुम सिर्फ पीले रंग के दो ढेर कर सकते हैं एक और स्विच दृश्यता: एक मूल तत्व के माध्यम से होवर।

आपको हमेशा चलने के लिए एनीमेशन की आवश्यकता है अन्यथा आप सिंक समस्या में भाग लेंगे।

मैं थोड़ा this.

Answer 3

आप एक setInterval इस्तेमाल कर सकते हैं पहले एनीमेशन के एनीमेशन राज्य को बनाए रखने और अन्य एनीमेशन माउस-ओवर पर उससे मेल खाने वाली फ़्रेम की तलाश के लिए एक नकारात्मक देरी देने के लिए प्राप्त करने के लिए अपना कोड संशोधित किया।

"मैनिपुलेटिंग सीएसएस एनिमेशन" अनुभाग पर राज्य-रखरखाव-अंतराल-चीज़ here के बारे में पढ़ें; here खोजने के लिए नकारात्मक देरी के बारे में पढ़ें।