Consideración de todas las formas posibles de trabajar con el tiempo de animación.

Propiedad animation-duration

animation-duration define el tiempo necesario para que una animación complete un ciclo (cambio del estado inicial al final), medido en segundos (s) o milisegundos (ms).

animation-duration: 3s | 3000ms

Ejecutemos el siguiente ejemplo y pasemos el cursor sobre la caja:

Propiedad animation-timing-function

animation-timing-function determina cómo progresa la animación a lo largo del tiempo, controlando la aceleración y desaceleración de la animación. La propiedad animation-timing-function puede tener los mismos valores que la propiedad transition-timing-function. Hay varias funciones de temporización predefinidas disponibles, como linear, ease y ease-in-out, o se puede definir una curva personalizada de Bézier cúbica usando la función cubic-bezier().

animation-timing-function: time_function

Apliquemos diferentes time_functions a las cajas en el ejemplo:

Propiedad animation-delay

animation-delay establece el tiempo que debe transcurrir antes de que comience la animación. Puede especificarse en segundos (s) o milisegundos (ms).

animation-delay: 0.1s | 100ms

Apliquemos diferentes retardos a los cuadros en el ejemplo: