A veces, debemos crear animaciones para los cambios de elementos en una página web con factores de control como la velocidad, el tiempo de retardo y la duración. En estos casos, se puede utilizar la propiedad transition para realizar esta tarea.

El elemento siempre tiene dos estados: inicial y final. Podemos controlar el comportamiento de cambio del elemento con la ayuda de las siguientes propiedades:

• transition-property - El nombre de la propiedad CSS que necesitamos animar.
• transition-duration - El tiempo durante el cual necesitamos 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 retardo antes de que se inicie el efecto de transición. Se especifica en segundos (s) o milisegundos (ms).

Consideraremos cada propiedad más adelante en este curso.

Nota

1 segundo = 1000 milisegundos. Entonces:

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

Práctica

Por ejemplo, queremos añadir un efecto de transición al color de fondo del elemento div cuando se pasa el ratón por encima. Nuestra tarea es

• cambiar la propiedad background-color;
• el retardo tiene que ser de 0.1 segundos;
• el cambio de color tiene que durar 0.3 segundos;
• para la función timing, esperamos un valor ease-in-out, lo que significa que empezará lento, se acelerará a la mitad, y volverá a ralentizarse al final;

Pasa el cursor por encima del elemento para ver el resultado.

Especificamos todas las propiedades relacionadas con la transición al elemento div y luego para el hover establecemos sólo la decoración que nos gustaría ver.