Sebastian Gomez

Feb 23, 2022

Todo sobre transiciones en CSS

🌟 Todo sobre transiciones en CSS 🌟

Las transiciones forman parte del conjunto de herramientas 🛠️ que poseemos como desarrolladores FrontEnd para mejorar la experiencia del usuario 🤗 dentro de nuestra aplicación web. Son útiles porque nos permiten animar 🎨 el cambio de valores en las distintas propiedades de un elemento, lo que puede hacerlo más llamativo al usuario e invitarlo a interactuar con él 🖱️. En este post, abordaremos el extenso tema de transiciones con diversos ejemplos adaptados desde la especificación 📚.

🚀 Comencemos con un ejemplo simple:

Tenemos un cuadrado simple 🔲:

<div id="square1" class="square red"></div>

Y unos estilos asociados a dicho cuadrado:

// Define la regla de estilo para la clase "square"
.square {
  // Establece la anchura de los elementos con la clase "square" en 50 píxeles
  width: 50px;
  // Establece la altura de los elementos con la clase "square" en 50 píxeles
  height: 50px;
  // Establece un margen inferior de 5 píxeles para los elementos con la clase "square"
  margin-bottom: 5px;
}

// Define la regla de estilo para la clase "red"
.red {
  // Establece el color de fondo de los elementos con la clase "red" en rojo
  background: red;
}

Además, tenemos una clase adicional que asignaremos al cuadrado en un momento específico en el tiempo ⏰:

// Define la regla de estilo para la clase "black"
.black {
  // Establece el color de fondo de los elementos con la clase "black" en negro
  background: black;
}

Sin embargo, queremos que este cambio se realice de una manera suave 🌊, controlada y agradable al usuario. Por tanto, aquí es donde necesitamos hacer uso de las transiciones. Esto lo podemos hacer añadiendo la propiedad transition dentro de la clase que queremos añadir:

// Define la regla de estilo para la clase "black"
.black {
  // Establece el color de fondo de los elementos con la clase "black" en negro
  background: black;
  // Establece una transición de animación para la propiedad "background" de los elementos con la clase "black"
  transition: background 2s 0.25s;
  // ^^^^^^^^^^ ^^^^^^^^^^ ^^^
  // Propiedad    Duración  Retraso
}

La propiedad transition nos permite que el cambio de background de rojo a negro se haga durante 2 segundos ⌛ (duración) en vez de hacer el cambio instantáneamente. Además, nos permite indicar que este cambio empiece a ocurrir 0.25 segundos después de que se asigne la clase al elemento (delay) ⏲️. Existe otra sintaxis alternativa para esto que requiere unas cuantas líneas más, pero es útil conocerla:

// Define la regla de estilo para la clase "black"
.black {
  // Establece el color de fondo de los elementos con la clase "black" en negro
  background: black;
  // Establece la propiedad que se animará en la transición, en este caso, la propiedad "background"
  transition-property: background;
  // Establece la duración de la transición, en este caso, 2 segundos
  transition-duration: 2s;
  // Establece el tiempo de espera antes de iniciar la transición, en este caso, 0.25 segundos
  transition-delay: 0.25s;
}

Al dominar las transiciones en CSS, podrás mejorar la experiencia del usuario en tus aplicaciones web y lograr efectos más atractivos y dinámicos 🎉.

🎉💻 Analogías de valores en transiciones CSS 🕒🚀

Al igual que hemos asignado valores en segundos ⏱️ a la duración y al retraso (delay), podríamos haberlo hecho en milisegundos (ms) 🌠. Para ello, bastaría con multiplicar por 1000 y añadir "ms" al final. Por ejemplo:

// Establece la duración de la transición de las propiedades animadas en 2000 milisegundos (2 segundos)
transition-duration: 2000ms;

// Establece un retraso antes de que comience la transición en 250 milisegundos (0.25 segundos)
transition-delay: 250ms;

Si queremos aplicar transiciones sobre más de una propiedad, podemos usar all para indicar que la transición se aplica sobre todas las propiedades posibles 🌐:

// Define la regla de estilo para la clase "black"
.black {
  // Establece el color de fondo de los elementos con la clase "black" en negro
  background: black;
  // Establece el color del texto de los elementos con la clase "black" en blanco
  color: white;
  // Establece una transición animada para todos los cambios de propiedades en los elementos con la clase "black"
  // La duración de la transición es de 2 segundos, y se retrasa 0.25 segundos antes de comenzar
  transition: all 2s 0.25s;
}

⚠️ Nota: El uso de transition all no es recomendable desde el punto de vista de desempeño (performance). Es altamente recomendable no usar transition all a menos que definitivamente quieras aplicar transiciones sobre todas las propiedades del elemento de la misma manera. A continuación, te explico cómo hacer transiciones específicamente con cada propiedad 🎯.

A veces, no deseamos que se apliquen transiciones sobre todas las propiedades de la misma manera. La propiedad transition también nos permite especificar la transición de cada propiedad simplemente separándolas por comas. Veamos un ejemplo 🎬:

// Define la regla de estilo para la clase "black"
.black {
  // Establece el color de fondo de los elementos con la clase "black" en negro
  background: black;
  // Establece el color del texto de los elementos con la clase "black" en blanco
  color: white;
  // Define una transición para cambiar el color de fondo y el color del texto en los elementos con la clase "black"
  transition: 
    // Establece una transición de 2 segundos para cambiar el color de fondo con un retardo de 0.25 segundos
    background 2s 0.25s, 
    // Establece una transición de 1.5 segundos para cambiar el color del texto con un retardo de 3 segundos
    color 1.5s 3s;
}

En el ejemplo anterior, estamos cambiando el background y el color con distinta duración y distinto retraso (delay) ⚡. Esto permite tener un control más granular de exactamente lo que necesitamos animar en cada transición 🎛️.

Hasta ahora, las transiciones de las que hemos hablado ocurren de manera lineal 📏, es decir, el cambio ocurre uniformemente durante el tiempo que dure la transición. Sin embargo, no es la única manera de hacerlo. Podemos acelerar el cambio al comienzo y desacelerarlo al final, lo que nos dará un tipo diferente de sensación al ver la transición 🌪️. Para determinar cómo ocurrirá el cambio, tenemos la propiedad transition-timing-function que puede tomar los siguientes valores:

// Establece la función de tiempo de transición como "linear", lo que significa que la velocidad de transición es constante a lo largo de toda la animación
transition-timing-function: linear;

// Establece la función de tiempo de transición como "ease-in", lo que significa que la velocidad de transición aumenta gradualmente al inicio de la animación
transition-timing-function: ease-in;

// Establece la función de tiempo de transición como "ease-out", lo que significa que la velocidad de transición disminuye gradualmente al final de la animación
transition-timing-function: ease-out;

// Establece la función de tiempo de transición como "ease-in-out", lo que significa que la velocidad de transición aumenta gradualmente al inicio y disminuye gradualmente al final de la animación
transition-timing-function: ease-in-out;

// Establece la función de tiempo de transición como una función personalizada "cubic-bezier" con los puntos de control especificados (0.21, 0.3, 0.1, 0.23)
transition-timing-function: cubic-bezier(0.21, 0.3, 0.1, 0.23);

Pero esta no es la única manera de añadir esta propiedad a las transiciones. También es posible hacerlo directamente en la propiedad transition:

// Define la regla de estilo para la clase "move"
.move {
  // Establece la propiedad de transformación en los elementos con la clase "move" para desplazarlos horizontalmente 500 píxeles a lo largo del eje X
  transform: translateX(500px);
  // Configura una transición animada para la propiedad de transformación en los elementos con la clase "move"
  transition: transform 2s 0.25s ease-in-out;
}

Incluso en cada transición sobre las propiedades:

// Define la regla de estilo para la clase "move-background"
.move-background {
  // Establece la propiedad de transformación en los elementos con la clase "move-background" para desplazarlos horizontalmente 500 píxeles a lo largo del eje X
  transform: translateX(500px);
  // Establece el color de fondo de los elementos con la clase "move-background" en rojo
  background: red;
  // Configura una transición animada para las propiedades de transformación y fondo en los elementos con la clase "move-background"
  transition: transform 2s 0.25s ease-in-out, background 1s 0.1s cubic-bezier(0.21, 0.3, 0.1, 0.23);
}

Profundicemos un poco en cómo funciona la propiedad `transition-timing-functioncuando toma el valor decubic-bezier()` 🧐. Para ello, revisemos en qué consiste la ecuación de la curva de Bézier en la cual se basa esta función.

Las curvas de Bézier son un sistema matemático desarrollado por Pierre Bézier para el trazado de dibujos de aeronaves y automóviles 🏎️✈️. Se describen como una ecuación que toma cuatro valores para describir la curva 📐:

cubic-bezier(P0, P1, P2, P3);

Estos cuatro valores (P0 a P3) son los que describen la transición del movimiento entre el punto inicial y el punto final, y con estos se pueden definir completamente diversos tipos de transiciones 🎢.

En estos sitios web puedes jugar más con este tipo de transiciones, donde puedes ajustar los valores para tener un mayor control en tu transición 🕹️:

• http://cubic-bezier.com/
• http://easings.net/

Debes tener en cuenta que hay propiedades que no son "transicionables" 🚫, es decir, no puedes aplicar transiciones a estas propiedades. Para ver una lista de cuáles propiedades son "transicionables" y cuáles no, puedes revisar este enlace:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

En el siguiente ejemplo, se muestra un conjunto de transiciones sobre cubos con distintas transition-timing-function y propiedades. Puedes jugar con ellas para evidenciar sus diferencias 🧩:

• https://codepen.io/seagomezar/pen/wPbYqe

Las herramientas para desarrolladores de los navegadores, como Chrome y Firefox, nos permiten ralentizar o acelerar las transformaciones para un mejor proceso de depuración (debug) en ellas 🔧. Para ello, puedes abrir la pestaña de animaciones.

Puedes también usar JavaScript para conocer el estado de una transición mediante los siguientes listeners:

• transitionstart
• transitionend

Finalmente, algunas consideraciones respecto a las transiciones 📝:

1. Transiciones alrededor de 100ms son instantáneas para los usuarios y difícilmente perceptibles 👀.
2. Transiciones de máximo 1 segundo y mínimo 250ms son buenas y mantienen a los usuarios conectados 🌟.
3. Más de 2 segundos es definitivamente una mala idea para transformaciones en sitios web estándar, ya que puede desconectar al usuario de lo que pasa ⏳.
4. De 250ms a 300ms es el tiempo estándar de la mayoría de animaciones 🕐.
5. Las transiciones, en general, te permiten crear experiencias que pasan solo una vez ⚡.
6. Si el navegador no soporta transiciones, en el peor de los casos siempre se cambia la propiedad 🔄.
7. Las transiciones son granulares porque te permiten animar una, dos o múltiples propiedades 🎨.

Eso es todo! Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas enmente 🧠, o que simplemente te haya ayudado a entender la naturaleza de las transiciones en CSS 🌈.

Déjame un comentario si lograste implementarlo, si quieres añadir alguna otra funcionalidad o si tienes alguna duda 📝. No dudes en dejarme un comentario en la parte de abajo. Recuerda que, si te gustó, también puedes compartir este artículo usando los enlaces a las redes sociales en la parte inferior 🔄.

¡Buena suerte en tus proyectos y no olvides seguir experimentando y aprendiendo sobre las transiciones en CSS! 💡🚀