CSS Animasyonlarını Birden Çok Elementte Nasıl Senkronize Etirsiniz?

Question

Bir sayfada CSS (özellikle, -webkit-animasyonu) aracılığıyla animasyon uygulamak istediğim iki öğe var. Animasyonun kendisi bir elemanı yukarı ve aşağı doğru sarar. Bir eleman her zaman gösterilir ve sıçrayan, diğeri fare-up (hover) kadar animasyonlu değildir.

Sorum şu: ne olursa olsun 2 elementin animasyon başladığında arasında (vs, her iki eleman aynı anda zirveye ulaşır var) her iki eleman arasında animasyon senkronize etmek mümkün mü? İşte

benim HTML var:

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

ve benim CSS:

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

ve son olarak, konunun bir çalışma demo: http://jsfiddle.net/7ZLmq/2/

(sorun, fare-over görmek Ben onun mümkün doğal, ama aslında sanmıyorum sarı blok)

Answer 1

Bir zıplatma sargıyı ve değiştiren bazı pozisyonu kullanarak benzer işlevleri kesmek

html:

CSS

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

: sadece sarı iki yığabilirsiniz gibi

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

demo http://jsfiddle.net/A92pU/1/

Answer 2

görünüyor olanlar ve görünürlüğü değiştir: ebeveyn öğesi aracılığıyla gezin.

Hep aksi takdirde Elinizdeki Senkronizasyon sorununun içine edeceğiz çalışan olması animasyon gerekir.

ben biraz this.

Answer 3

Önce animasyon animasyon durumunu korumak ve diğer animasyonu fare üzerinde üzerinde uyuşma anahtar kareye kadar arama için negatif gecikme vermek için setInterval kullanabilirsiniz almak için kodunuzu güncellenmiştir. "Kurgulama CSS Animasyonlar" bölümünde devlet muhafaza-aralık-şey here, yaklaşık

Oku; here'u aramak için negatif gecikme hakkında bilgi edinin.