Transiciones CSS: cómo usar la propiedad transition

CSS3 trajo consigo muchas funcionalidades nuevas con las que crear efectos vistosos. Una de las más útiles es la propiedad transition.

La propiedad transition es un módulo de CSS3. Sirve para crear un efecto de cambio dinámico sobre una etiqueta HTML o una clase con una sintaxis muy simple:

transition: property duration timing-function delay;

Las transiciones de CSS3 son una forma estupenda de añadir algo de animación a un sitio sin escribir una sola línea de JavaScript. Antes de empezar, puedes echar un vistazo a un tutorial de CSS que hice y que se apoya en esta propiedad:
Tutorial – Crear una card en CSS

La propiedad

Lo primero: para que la transición funcione hay que indicar sobre qué propiedad se aplica. En nuestro ejemplo vamos a animar un background-color. Escrita por separado, la propiedad queda así:

transition-property: background-color;

La transición

Una vez definida la propiedad, hay que asignar los valores de inicio y de fin. En nuestro ejemplo hace falta un color de partida y otro de llegada, asociado a otro estado.
Aquí definimos la transición sobre background-color, luego el valor inicial de background-color en #element y, por último, el valor final cuando el usuario pasa el ratón por encima, con #element:hover:

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Duración de la animación

Ya tenemos la propiedad que se va a transformar y sus valores de inicio y de fin, falta la duración de la transición. Se indica en segundos o en milisegundos, así:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Esto significa que el div #element cambiará de background-color a lo largo de 200 milisegundos (0,2 segundos)

La propiedad transition-timing-function

Con ese código ya tienes una transición, pero puedes ir más allá con la propiedad transition-timing-function. Sirve para modificar el ritmo de la transición. Por defecto, la transición usa la curva ease. También puedes elegir otros efectos nativos o definir una curva de Bézier para crear el tuyo propio.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

Así queda en nuestro ejemplo:

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

Retrasar la transición

Además, igual que ocurre con la duración, la propiedad transition-delay permite retrasar el arranque del efecto.

transition-delay: 1s;

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···