Animaciones CSS

Retrasar una animación

los animation-delay La propiedad especifica un retraso para el inicio de una animación.

El siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación:

También se permiten valores negativos. Si usa valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante norte segundos.

En el siguiente ejemplo, la animación comenzará como si ya se hubiera estado reproduciendo durante 2 segundos:

Establecer cuántas veces debe ejecutarse una animación

los animation-iteration-count La propiedad especifica el número de veces que debe ejecutarse una animación.

El siguiente ejemplo ejecutará la animación 3 veces antes de que se detenga:

El siguiente ejemplo usa el valor «infinito» para que la animación continúe para siempre:

Ejecutar animación en dirección inversa o ciclos alternativos

los animation-direction La propiedad especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternativos.

La propiedad animation-direction puede tener los siguientes valores:

• normal – La animación se reproduce normalmente (hacia delante). Esto es predeterminado
• reverse – La animación se reproduce en sentido inverso (al revés)
• alternate – La animación se reproduce primero hacia adelante y luego hacia atrás
• alternate-reverse – La animación se reproduce primero hacia atrás y luego hacia adelante

El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás):

El siguiente ejemplo usa el valor «alternativo» para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás:

El siguiente ejemplo usa el valor «alternate-reverse» para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante:

Especificar la curva de velocidad de la animación

los animation-timing-function propiedad especifica la curva de velocidad de la animación.

La propiedad animation-timing-function puede tener los siguientes valores:

• ease – Especifica una animación con un inicio lento, luego rápido, luego termina lentamente (esto es predeterminado)
• linear – Especifica una animación con la misma velocidad de principio a fin
• ease-in – Especifica una animación con un inicio lento.
• ease-out – Especifica una animación con un final lento.
• ease-in-out – Especifica una animación con un comienzo y un final lentos
• cubic-bezier(n,n,n,n) – Le permite definir sus propios valores en una función cubic-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:

Especificar el modo de relleno para una animación

Las animaciones CSS no afectan a un elemento antes de que se reproduzca el primer fotograma clave o después de que se reproduzca el último fotograma clave. La propiedad animation-fill-mode puede anular este comportamiento.

los animation-fill-mode La propiedad especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que termine o ambos).

La propiedad animation-fill-mode puede tener los siguientes valores:

• none – Valor por defecto. La animación no aplicará ningún estilo al elemento antes o después de su ejecución.
• forwards – El elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el recuento de iteraciones de la animación)
• backwards – El elemento obtendrá los valores de estilo establecidos por el primer fotograma clave (depende de la dirección de la animación) y los conservará durante el período de retraso de la animación.
• both – La animación seguirá las reglas tanto hacia adelante como hacia atrás, extendiendo las propiedades de la animación en ambas direcciones

El siguiente ejemplo permite que el elemento