Problema con delay de animación CSS

[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!