01 Capítulo 1 · Lección 6

Shorthand transition

Redactado por
Author Sebastian V.
Fecha de publicación

29/03/2024

Tiempo de lectura

3 min

Tema

CSS Transitions

Escribe menos, haz más

Escribir cuatro propiedades distintas de transition-* cada vez que quieres animar un botón no es nada eficiente. Para resolver esto, CSS nos ofrece el shorthand (atajo): la propiedad unificada transition.

El orden mágico

Aunque el navegador es bastante flexible interpretando el shorthand, existe un orden estándar y recomendado que la comunidad adopta:

> _ 
transition: [propiedad] [duración] [curva] [retraso];

Ejemplo: transition: background-color 0.3s ease-out 0.1s;

La regla de oro del tiempo

Dado que el shorthand acepta dos valores de tiempo (duración y delay), ¿cómo sabe el navegador cuál es cuál? El primer valor de tiempo que encuentre siempre será la duración. El segundo (si existe) será el delay.

Múltiples transiciones

¿Qué pasa si quieres animar el color en 0.2s pero la posición en 0.5s? Usas una coma. Es como escribir múltiples shorthands en una sola línea:

> _ 
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s ease-in;

Consejo profesional

Al usar múltiples transiciones con comas, mantén cada transición en una línea separada dentro de tu CSS para facilitar la lectura. ¡Es una gran práctica de código limpio!

Ejemplo práctico

> _ 
<button class="btn">
  Botón Optimizado
</button>
> _

Este botón usa la notación simplificada en una sola línea, produciendo el mismo resultado hermoso pero con un código más mantenible.

Errores comunes

01
Olvidar el orden del delay Si escribes transition: transform ease 0.2s 0.5s;, el navegador siempre tomará el primer tiempo (0.2s) como duración y el segundo (0.5s) como delay.
02
Sobrescribir el shorthand Si escribes el shorthand transition: all 0.3s; y debajo pones transition-duration: 0.5s;, la última propiedad sobreescribirá parte del shorthand.

Practica lo aprendido

A partir de ahora, utiliza el shorthand en todos tus proyectos.

01 Memoriza el orden: property | duration | timing-function | delay
02 El único orden estricto es que la duración debe ir antes que el delay.
03 Para animar varias propiedades, sepáralas por comas.
04 Ej: transition: transform 0.3s, opacity 0.5s ease-in;
05 Escribir menos código te hace más productivo y tu CSS más limpio.