Transition shorthand en CSS: qué es y cómo usarla para optimizar las transiciones

Si alguna vez has trabajado con transiciones en CSS, probablemente ya conoces la cantidad de propiedades que puedes configurar, como transition-property, transition-duration, transition-timing-function y transition-delay. Aunque estas propiedades te dan una gran libertad para configurar y personalizar las transiciones en una página web, es posible que escribirlas una por una te resulte un poco tedioso. Por esto, existe transition shorthand, una abreviatura con la que puedes declarar todas estas propiedades en una sola línea de código.

En este artículo, te contaremos qué es transition shorthand, cómo funciona y por qué es una herramienta esencial si quieres mejorar tus animaciones y mantener tu CSS limpio y organizado.

¿Qué es transition shorthand en CSS?

La propiedad transition shorhand en CSS es una forma abreviada de definir las transiciones de una manera más precisa. Así, en lugar de escribir cuatro líneas para configurar el tiempo, el retraso y las propiedades de una transición, puedes hacerlo todo en una sola declaración, lo que es muy útil para simplificar y reducir la cantidad de código en una página web.

Por ejemplo, si necesitas animar el color de fondo y el ancho de un elemento, normalmente tendrías que hacer algo como esto:

transition-property: background-color, width;  
transition-duration: 2s, 1s;  
transition-timing-function: ease-in-out;  
transition-delay: 0.5s;  

Pero con transition shorthand, puedes simplificarlo así:

transition: background-color 2s ease-in-out 0.5s, width 1s ease-in-out 0.5s;  

De esta forma, el código se mantiene mucho más ligero y limpio.

Elementos principales de transition shorthand

Para entender mejor cómo funciona la transition shorthand en CSS, es necesario que recordemos cuáles son los cuatro componentes de una transición:

1. Propiedad de estilo: La transition-property es la propiedad que define qué propiedades van a ser animadas. Puede ser algo específico como background-color o simplemente all para incluir todas las propiedades animables.
2. Duración: La transition-duration es la que especifica cuánto tiempo durará la transición, en segundos (s) o milisegundos (ms).
3. Función de temporización: Con la transition-timing-function, puedes controlar cómo será el progreso de la animación, por ejemplo, si será lineal, acelerada, desacelerada, etc.
4. Retraso: La propiedad transition-delay establece el tiempo que tiene que pasar antes de que la transición comience.

Es importante que mantengas este orden, ya que CSS lo interpreta secuencialmente. Si alteras el orden, la transición podría no funcionar como esperas.

¿Cómo usar transition shorthand en CSS?

Para aplicar transition shorthand, lo primero que necesitas es un elemento HTML con estilo base y alguna interacción que desencadene la transición. Veámoslo mejor con este ejemplo sencillo:

HTML

<button class="mi-boton">Pasa el cursor</button>  

CSS

.mi-boton {  
  background-color: #3498db;  
  color: white;  
  border: none;  
  padding: 10px 20px;  
  font-size: 16px;  
  transition: background-color 0.3s ease, transform 0.2s ease;  
}  

.mi-boton:hover {  
  background-color: #2ecc71;  
  transform: scale(1.1);  
}  

En este caso, la propiedad background-color cambia suavemente de azul a verde en 0.3 segundos, mientras que la propiedad transform amplía el botón ligeramente en 0.2 segundos.

Ventajas de usar transition shorthand

Si todavía te preguntas por qué usar la transition shorthand en lugar de ejecutar cada una de las propiedades por separado, a continuación te contaremos algunas de sus principales ventajas:

Simplifica tu código

En lugar de tener que escribir varias líneas para cada propiedad de transición, puedes combinar todo en una sola línea, lo que sin duda te ahorrará tiempo y espacio. De esta manera, usar la abreviatura transition reduce la cantidad de código repetitivo y hace que las condiciones sean más concisas y fáciles de gestionar.

Mejora la legibilidad

Cuando tienes menos líneas de código, es más fácil entender qué transiciones se están aplicando a un elemento. En ese sentido, la transition shorthand te permite identificar rápidamente los estilos animados, lo que facilita la revisión y el mantenimiento del código.

Mantiene el CSS organizado

Si trabajas en un proyecto grande, es esencial mantener el código limpio. Por eso, la transition shorthand te ayuda a mantener todo más estructurado, asegurando que las transiciones estén claramente definidas y minimizando la aparición de posibles errores. 

Ejemplo de transition shorthand en CSS

Ahora, veamos un ejemplo de transition shorthand con múltiples transiciones. Para esto, imagina que estás diseñando una tarjeta que gira y cambia de color cuando pasas por encima el cursor.

HTML

<div class="tarjeta">  
  <p>¡Hola, CSS!</p>  
</div>  

CSS

.tarjeta {  
  width: 200px;  
  height: 300px;  
  background-color: #f39c12;  
  color: white;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  transform: rotateY(0deg);  
  transition: background-color 0.5s ease, transform 0.7s ease-in-out;  
}  

.tarjeta:hover {  
  background-color: #8e44ad;  
  transform: rotateY(180deg);  
}  

En este caso, la clase .tarjeta define el estilo inicial de la tarjeta, es decir, sus dimensiones, color de fondo y de texto, así como la disposición del contenido usando Flexbox. Luego, se utiliza la propiedad transition como shorthand para definir dos transiciones: el color de fondo (background-color) cambiará suavemente de naranja (#f39c12) a púrpura (#8e44ad) en 0.5 segundos con una curva de aceleración ease, mientras que la propiedad transform aplicará una rotación en el eje Y de 0° a 180° en 0.7 segundos, utilizando una curva de aceleración ease-in-out, que acelera al principio y desacelera al final de la transición.

Por último, el selector .tarjeta:hover define los estilos que se aplicarán cuando el usuario pase el cursor sobre la tarjeta. En este caso, el color de fondo cambia a #8e44ad y la tarjeta rota 180 grados en el eje Y. 

¿Por qué deberías usar la transition shorthand?

La transition shorthand es uno de esos pequeños trucos en CSS que pueden hacer una gran diferencia en tu flujo de trabajo y en la calidad de tus páginas web. Con solo un comando, puedes controlar diferentes aspectos de tus transiciones, simplificar tu código y crear animaciones impresionantes sin complicarte la vida.

En ese sentido, implementar la transition shorthand te será de gran ayuda si quieres mejorar la interfaz de tu página web, ya que no solo te permite mantener el código más limpio y ligero, sino que también mejora la experiencia de usuario al hacer sitios más dinámicos, atractivos y, sobre todo, funcionales.

Si quieres seguir aprendiendo sobre animaciones y otros temas de CSS, no dudes en unirte a nuestro Bootcamp de Desarrollo Web. Domina en pocos meses las herramientas necesarias para crear sitios web modernos y empieza a trabajar en un sector de alta demanda, con estabilidad laboral y grandes salarios.

¡Tu nueva carrera en el sector IT te está esperando!