[SOLUCIONADO] Problema con delay de animación CSS

[berkeleyPunk]

Buen día.

La idea es la siguiente:
Tenemos 2 cajas sobrepuestas. Cuando se pone el cursor encima de la caja 1, inmediatamente sale la caja 2. Hasta aquí, todo bien.

El problema está en la vuelta. Cuando se quita el cursor de la caja 1, la caja 2 se regresa inmediatamente sin animación, y 1 seg después se regresa otra vez.

Este segundo que tarda la caja 2 para regresarse otra vez, es el del delay de la animación. La cosa se arregla si se pone este delay en cero. Pero la cosa es que no deseo ponerlo en cero.

Aquí pueden ver el código en acción.

¿Cómo arreglo este extraño en CSS?

Saludos cordiales!

[devildrey33]

Un error muy común con las animaciones es creer que los valores que le pasamos en un keyframes [enlace eliminado], perduran una vez terminada la animación.

Lo que sucede realmente es que al cambiar el nombre de la animación en javascript el navegador vuelve a consultar el CSS, y ve que el objeto vuelve a estar a translate(0%,0%) ya que has anulado el anterior keyframe que estaba al translate(0%,100%), luego pasado el segundo de delay pasa de 0 a 100 instantáneamente y realiza la animación desde 100 a 0.

Ademas para hacer efectos hover animados se suele utilizar la propiedad transition [enlace eliminado], ya que desde ella es mucho mas fácil controlar efectos hover, y no requieren de javascript externo.

Espero haber sido de ayuda, Saludos!

[pzin]

No le pongas delay, haz que la animación de vuelta dure el doble, y que se empiece a mover a la mitad de la animación: http://jsfiddle.net/a6Juc/1

Iniciado por devildrey33

Un error muy común con las animaciones es creer que los valores que le pasamos en un keyframes , perduran una vez terminada la animación.

De hecho con animation-fill-mode: forwards es lo que se suele hacer.

[devildrey33]

Yo sigo prefiriendo hacerlo con transition, y como ves no hace falta JavaScript y puedes establecer el delay de 1 segundo al salir del hover : http://jsfiddle.net/a6Juc/3/

Otra cosa, al hacerlo con animation / JavaScript si sales y entras muy rápido con el mouse del objeto, la animación se corta y empieza siempre desde cero, cosa que con el transition no pasa.

Espero que te sirva de ayuda, Saludos.

[berkeleyPunk]

Gracias por responder devildrey33.

Comentas que:

Iniciado por devildrey33

...el objeto vuelve a estar a translate(0%,0%), ya que has anulado el anterior keyframe que estaba al translate(0%,100%)...

Espero puedas abundar un poco más, porque no termino de entender tus indicaciones . ¿En qué momento exactamente el navegador entiende que el objeto vuelve a estar a translateY(0%), cuando, según el CSS (el forwards que comenta pzin), el objeto está en translateY(100%) justo antes de suceder el evento mouseout, o sea, justo antes de quitar el cursor del objeto?

También comentas que la cosa se puede hacer con transiciones. Tienes razón, desgraciadamente, al abrir el post, reduje lo más que pude el código con el que trabajaba, para no molestar al lector con elementos innecesarios que sólo hacen más difícil la lectura. Lo que en el fondo quería hacer, y por eso utilizaba javascript, era algo un poquillo más complejo. Tenía en mente hacer un menú cuyas opciones salieran escalonadas. O sea, inmediatamente la 1ra opción, medio segundo después la 2da opción y así sucesivamente. Y lo mismo de regreso. Hasta donde veo, no se puede hacer eso sólo con puras transiciones (¿o sí?). Ver ejemplo aquí, en donde la ida se ve bien, pero la vuelta no.

Igualmente, gracias por responder, maestro pzin. Como casi siempre, nada más que decir, asunto arreglado.

Saludos cordiales!

[pzin]

Hace un tiempo alguien pidió ayuda en el foro para un menú que se desplegaba, no recuerdo el problema exactamente, pero le ayudé y le mostré la solución en un codepen que le hice, ahí ves que se puede hacer algo parecido a lo que dices usando transiciones.

[berkeleyPunk]

Iniciado por pzin

Hace un tiempo alguien pidió ayuda en el foro para un menú que se desplegaba... le ayudé y le mostré la solución...

Ese menú del CodePen se ve increíble. Voy a estudiarlo para ver cómo se hace tal cosa .

Gracias, y, seguramente, hasta pronto!