Buena noche.
Cuando se hace una animación básica en CSS, digamos cuando la
ida se ejecuta cuando el elemento a animar tiene el cursor encima, la animación cuenta con tantos
frames como se hayan establecido, mas no la
vuelta. Ésta regresa de 100% a 0% de una vez.
La pregunta es: ¿Cómo hacer para que el regreso tenga tantos frames como la ida, o sea, que se realice la misma animación en reversa, u otra, cuando se quita el cursor del elemento animado?
Un ejemplo claro de lo que pretendo está aquí:
http://www.fertility.com.mx/es/index.html Está en Flash, pero la idea es la misma.
Hasta ahora, llevo lo siguiente, que es la ida. Falta la vuelta:
Código CSS:
Ver original@-webkit-keyframes animation_1
{
0% {-webkit-transform:translateX(0px);}
20% {-webkit-transform:translateX(500px);}
22% {-webkit-transform:translateX(450px);}
24% {-webkit-transform:translateX(500px);}
56% {-webkit-transform:translateX(450px);}
100% {-webkit-transform:translateX(500px);}
}
.caja {
position:absolute;
top:0;
left:-500px;
width:600px;
height:100px;
background-color:red;
}
.caja:hover {
-webkit-animation-name:animation_1;
-webkit-animation-duration:500ms;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:linear;
}
