A veces, es necesario crear animaciones para los cambios de elementos en una página web controlando factores como la velocidad, el tiempo de retraso y la duración. En estos casos, se puede utilizar la propiedad transition para lograr este objetivo.

El elemento siempre tiene dos estados: inicial y final. Es posible controlar el comportamiento del cambio del elemento mediante las siguientes propiedades:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property - El nombre de la propiedad CSS que se desea animar;
• transition-duration - El tiempo durante el cual se debe cambiar el estado del elemento. Se especifica en segundos (s) o milisegundos (ms);
• transition-timing-function - Especifica la curva de velocidad del efecto de transición. Los valores típicos son ease, linear, ease-in, ease-out y ease-in-out;
• transition-delay - El tiempo de retraso antes de que comience el efecto de transición. Se especifica en segundos (s) o milisegundos (ms).

Cada propiedad será analizada en detalle más adelante en este curso.

Nota

1 segundo = 1000 milisegundos. Así que:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Práctica

Por ejemplo, se desea agregar un efecto de transition al color de fondo del elemento div cuando se pasa el cursor sobre él. La tarea es:

• Cambiar la propiedad background-color;
• El retraso debe ser de 0.1 segundos;
• El cambio de color debe durar 0.3 segundos;
• Para la timing-function, se espera el valor ease-in-out, lo que significa que comenzará lento, acelerará en el medio y volverá a desacelerar al final.

Pasa el cursor sobre el elemento para ver el resultado.

Especificamos todas las propiedades relacionadas con la transición en el elemento div y luego, para el hover, solo configuramos la decoración que deseamos visualizar.