El transition en CSS sirve para controlar la velocidad de animación cuando se cambia alguna propiedad en CSS. Es decir, en lugar de mostrar los cambios de la propiedad inmediatamente, podemos hacer que estos cambios se generen de manera progresiva. Por ejemplo, si cambiamos el color de un elemento de blanco a negro, generalmente el cambio es instantáneo. Veamos un poco más a fondo en qué consiste el transition en CSS y cómo podemos utilizarlo.

¿Qué encontrarás en este post?

Transition en CSS: breve introducción

La propiedad transition en CSS es utilizada para controlar la animación suave y gradual de cambios en los estilos de un elemento HTML. Permite especificar la duración, el retraso, la función de temporización y otras características de la transición entre un estado inicial y un estado final de los estilos de un elemento cuando se activa algún evento, como un cambio de estado, por ejemplo, un hover o un clic del usuario. Esto proporciona una experiencia de usuario más fluida y agradable al navegar por un sitio web.

Las transiciones nos permiten definir el paso y cambio entre dos estados de un elemento. Se pueden definir diferentes estados del transition en CSS usando pseudo clases en CSS como :hover o :active o configurar dinámicamente usando JavaScript. Con las transiciones CSS habilitadas, se producen cambios en intervalos de tiempo que siguen una curva de aceleración, todo lo cual se puede personalizar.

Formas del transition en CSS

El transition en CSS es una propiedad abreviada que contiene varias formas:

Transition-behavior

Esta propiedad especifica si se iniciarán transiciones para propiedades cuyo comportamiento de animación es discreto.

Tiene dos valores:

Allow-discrete: se iniciarán transiciones en el elemento de propiedades animadas discretas.
Normal: Las transiciones no se iniciarán en el elemento de propiedades animadas discretas.

Animación discreta: Es una situación en la que los valores de una propiedad no son aditivos y la interpolación cambia abruptamente del valor inicial al valor final en el punto medio de la animación (cuando p es igual a 0.5). Esto significa que no hay una transición suave entre los valores, sino que el cambio ocurre de manera instantánea en un punto específico

En una animación discreta, los valores de una propiedad no se suman entre sí. En cambio, cuando se realiza una transición, la propiedad cambia gradualmente desde su valor inicial hasta su valor final. Esta transición ocurre de manera lineal, de modo que cuando el progreso de la transición es menor al 50%, la propiedad tiene el valor inicial. Cuando el progreso es igual o mayor al 50%, la propiedad tiene el valor final.

La sintaxis es la siguiente:

/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

Transition-property

Esta propiedad del transition en CSS es utilizada para proponer los nombres de las propiedades a las que el efecto de la transición debe aplicarse. Tiene varios valores:

None: significa que la transición no se aplicará a ninguna propiedad.
All: lo contrario de lo anterior, este valor quiere decir que la transición se aplicará a todas las propiedades que puedan tener una transición animada.
Ident: Una secuencia de caracteres que señalará la propiedad en la cual el efecto de transición se aplicará al cambiar su valor. Esta secuencia está formada por letras de la “a” a la “z” sin distinguir mayúsculas, números del 0 al 9, un guion bajo (_) o un guion simple (-). La primera letra que no sea un guion debe iniciar la cadena (es decir, no se pueden tener números al principio, incluso si están precedidos por un guion). Además, no se permiten dos guiones al inicio de la secuencia de caracteres.

Para entender mejor, veamos la sintaxis:

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident> (en-US)

Transition-duration

Esta propiedad dicta el tiempo que debe tardar una animación en completarse. Su valor predeterminado está en 0, es decir, que no se producirá ninguna animación.

El único valor que posee esta propiedad es el <time>, que indica el tiempo que se tardará la transición de un valor anterior, al nuevo valor.

La sintaxis es la siguiente:

transition-duration = 
  <time [0s,∞]>#

Transition-timing-function

Esta propiedad establece cómo se calculan los valores intermedios para las propieadades CSS que se ven afectadas por un efecto de transition en CSS. El valor que utiliza esta propiedad es el <easing-function>, que puede dividirse en muchos otros valores:

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier (p1, p2, p3, p4)
steps (n. <jumpterm>)
- jump-start
- jump-end
- jump-none
- jump-both
- start
- end
step-start
step-end

Su sintaxis es la siguiente:

/* Keyword values */
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;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple easing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

Transition-delay:

Esta propiedad determina la cantidad de tiempo que se esperará entre un cambio solicitado hacia una propiedad, y el comienzo de un efecto de transición. Es decir, aquí se decide cuánto tiempo va a durar el efecto que le apliquemos al transition en CSS.
Un valor de 0 segundos, o 0 milisegundos, significa que la propiedad iniciará la transición de forma inmediata al cambiar el valor; valores positivos retrasarán el inicio del efecto de transición por la cantidad de segundos correspondiente. Valores negativos harán que la transición comience de inmediato, pero darán la impresión de que el efecto de la transición comienza en la mitad de la animación.

Veamos la sintaxis y un pequeño ejemplo:

//Sintaxis
transition-delay = 
  <time>#  

//Ejemplo
transition-delay: 4s
transition-delay: 3s, 5ms

transition-delay: initial

Como pudiste observar, el transition en CSS es una propiedad muy versátil. Ten en cuenta que esta apenas es la punta del iceberg. Si te unes a nuestro bootcamp de desarrollo web, podrás aprender sobre temáticas como selectores básicos en CSS, atributos en CSS y qué es auto fill en CSS.

¡No esperes más para unirte a una revolución tecnológica cargada de oportunidades laborales! ¡Te esperamos!