Interpolaciones en CSS. Propiedad transition

La diferencia entre una transición y una transformación, aparte del efecto de animación en las primeras, es que en las transiciones hay que definir explícitamente el valor inicial de cada propiedad que queramos animar.

Desplazamiento

Se mueve

Anchura

Se mueve

Propiedades Combinadas

Se puede especificar una transición diferente para cada propiedad que queramos animar, variando la duración y tipo de aceleración para cada una de ellas.

Se mueve

Propiedades Combinadas de forma Secuencial

Esto es especialmente útil cuando queremos generar un efecto de animación continua, usando la propiedad delay de la transición.

Se mueve

Animar todas las propiedades

Cuando queremos aplicar el mismo tipo de transición a todas las propiedades podemos usar la palabra clave all. Esto aplica la misma configuración de transición a cualquier propiedad del elemento que modifiquemos y soporte la propiedad de animación

Se mueve