animation - keyframes - css efectos texto movimiento

¿Cómo sincronizar animaciones CSS a través de 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í simplemente rebota un elemento hacia arriba y hacia abajo. Un elemento siempre se muestra y rebota, el otro no se anima hasta que se pasa el mouse (pasar).

Mi pregunta es: ¿es posible sincronizar (hacer que ambos elementos alcancen su vértice al mismo tiempo, etc.) la animación a través de ambos elementos independientemente de cuándo se inicie la animación del segundo elemento?

Aquí está 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 del problema: http://jsfiddle.net/7ZLmq/2/

(para ver el problema, pase el mouse sobre el bloque amarillo)

Answer 1

No creo que sea posible de forma nativa, pero en realidad se puede hackear una funcionalidad similar utilizando un envoltorio de rebote y un cambio de posición.

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

Parece que solo puede apilar dos de los amarillos y cambiar la visibilidad en: desplazarse a través de un elemento padre.

Necesitas que la animación se ejecute siempre; de ​​lo contrario, te encontrarás con el problema de sincronización que tienes.

Modifiqué un poco tu código para obtener this.

Answer 3

Podría usar un setInterval para mantener el estado de animación de la primera animación y darle a la otra animación un retraso negativo para buscar su fotograma clave correspondiente al pasar el mouse por encima.

Lea acerca de la situación de intervalo de mantenimiento del estado here , en la sección "Manipulación de animaciones CSS"; Lea sobre el retraso negativo para buscar here .

Answer 4

en el cursor del mouse:

1. Eliminar clases de animación de ambos elementos.
2. use requestAnimationFrame(() => { ... add here "bounce" class to both elements })

Debe sincronizarse muy bien.