Propiedad animation-iteration-count

Es posible controlar cuántas veces debe reproducirse una animación. animation-iteration-count establece el número de repeticiones de la animación.

animation-iteration-count: number_without_units

También se puede especificar la palabra clave infinite como valor. Así, la animación se ejecutará de forma continua. A continuación, se presenta un ejemplo para observar cómo influir en la cantidad de repeticiones de la animación:

Propiedad animation-direction

animation-direction controla la dirección de la animación. Determina si una animación debe reproducirse hacia adelante, hacia atrás o alternar entre ambas direcciones.

animation-direction: normal | reverse | alternate | alternate-reverse

• normal - valor por defecto. La animación se reproducirá hacia adelante desde el principio hasta el final;
• reverse - La animación se reproducirá hacia atrás desde el final hasta el principio;
• alternate - La animación se reproducirá hacia adelante y luego hacia atrás, alternando entre ambas direcciones;
• alternate-reverse - La animación se reproducirá hacia atrás y luego hacia adelante, alternando entre ambas direcciones.

Veamos qué efecto podemos lograr en el siguiente ejemplo. Tendremos una imagen en la que el comportamiento predeterminado es moverse repetidamente de izquierda a derecha. Sin embargo, podemos cambiar su comportamiento. Probaremos los cuatro valores de la propiedad animation-direction.