Animaciones CSS3 al fin del ciclo

26/mar/2014 0

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

/* creando la animación */
@keyframes gira-y-quedate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(160deg);
}
}
#elemento {
animation-name: gira-y-quedate;
animation-duration: 1s;
animation-iteration-count 1;
}

Como notarán al terminar la animación esperamos que quede con la rotación de 160 grados y se detenga pero lo que sucede es que vuelve al keyframe inicial, a los 0 grados. Ese es el comportamiento por defecto de la propiedad animation-fill-mode, la cual especifica cómo debe aplicarse una animación CSS al elemento antes y después que se ejecute. Los valores de esta propiedad son:

  • none (por defecto, la animación no aplicará ningún estilo al elemento antes ó despues de ejecutarse)
  • forwards (el elemento mantendrá su(s) valor(es) en el último keyframe de su animación)
  • backwards (el elemento aplicará su(s) valor(es) definidos en el primer keyframe de su animación)
  • both (la animación aplicará las propiedades de fowards y backwards, antes y después de ejecutarse)

Por lo que aplicando correctamente la propiedad al llamado de la animación obtenemos el resultado esperado:

#elemento {
animation-name: gira-y-quedate;
animation-duration: 1s;
animation-iteration-count 1;
animation-fill-mode: forwards;
}

Link:

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab