Come sincronizzare le animazioni CSS su più elementi?

Question

Ho due elementi in una pagina che mi piacerebbe animare tramite CSS (in particolare, -webkit-animation). L'animazione stessa rimbalza semplicemente un elemento su e giù. Un elemento viene sempre mostrato e rimbalzato, l'altro non è animato fino al passaggio del mouse (passaggio del mouse).

La mia domanda è: è possibile sincronizzare (avere entrambi gli elementi raggiungono il loro apice allo stesso tempo, ecc.) L'animazione tra entrambi gli elementi indipendentemente dal momento in cui viene avviata l'animazione del secondo elemento?

Ecco il mio HTML:

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

e la mia 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; 
} 

e, infine, una demo di lavoro del problema: http://jsfiddle.net/7ZLmq/2/

(vedere il problema, il mouse-over il blocco giallo)

Answer 1

Non penso che sia possibile in modo nativo, ma in realtà è possibile incidere una funzionalità simile utilizzando un involucro rimbalzo e qualche posizione alterando

html:

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

CSS:

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

Sembra che si può solo impilare due dei gialli quelli e cambia visibilità su: passa il mouse su un elemento genitore.

È necessario che l'animazione sia sempre in esecuzione altrimenti si verificherà il problema di sincronizzazione che si ha.

ho modificato il codice di un po 'per ottenere this.

Answer 3

si potrebbe usare un setInterval per mantenere lo stato di animazione della prima animazione e dare l'altra dell'animazione un ritardo negativo di cercare al suo fotogramma chiave corrispondente al passaggio del mouse.

Leggi informazioni sull'intervallo di mantenimento stato here nella sezione "Manipolazione delle animazioni CSS"; leggi il ritardo negativo per cercare here.