Cómo sincronizar animaciones CSS en múltiples elementos?

Question

Tengo dos elementos en una página que me gustaría animar a través de CSS (específicamente, -webkit-animation). La animación en sí misma simplemente rebota un elemento hacia arriba y hacia abajo. Un elemento siempre se muestra y rebota, el otro no se anima hasta que pasa el mouse (hover).

Mi pregunta es: ¿Es posible sincronizar (tienen ambos elementos alcanzan su ápice, al mismo tiempo, etc) la animación a través de ambos elementos, independientemente de cuando se inicia la animación del segundo elemento?

Aquí es mi HTML:

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

y mi 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; 
} 

y, finalmente, una demostración de trabajo de la cuestión: http://jsfiddle.net/7ZLmq/2/

(ver el problema, el ratón por encima el bloque amarillo)

Answer 1

No creo que sea posible de forma nativa, pero en realidad se puede hackear una funcionalidad similar mediante el uso de un envoltorio de rebote y una posición alterar

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

demostración http://jsfiddle.net/A92pU/1/

Answer 2

Parece que sólo se puede apilar dos de los amarillos unos y cambiar la visibilidad en: desplazarse por un elemento principal.

Necesita que la animación se ejecute siempre, de lo contrario, se encontrará con el problema de sincronización que tiene.

he modificado su código un poco para llegar this.

Answer 3

Se puede usar un setInterval para mantener el estado de animación de la primera animación y dar a la otra animación de un retardo negativo a buscar a su fotograma clave correspondiente en el ratón por encima.

Lea sobre el estado-keeping-interval-thing here, en la sección "Manipulating CSS Animations"; lea sobre el retraso negativo para buscar here.