Transiciones

Podcast de CSS - 044: Transiciones

Al interactuar con un sitio web, es posible que notes que muchos elementos tienen estado. Por ejemplo, los menús desplegables pueden estar abiertos o cerrados. Los botones pueden cambiar de color cuando se enfoca o coloca el cursor sobre ellos. Los modales aparecen y desaparecen.

De forma predeterminada, CSS cambia el estilo de estos estados al instante.

Con las transiciones de CSS, podemos interpolar entre el estado inicial y el estado objetivo del elemento. La transición entre ambos mejora la experiencia del usuario, ya que proporciona orientación visual, asistencia y sugerencias sobre la causa y el efecto de la interacción.

Propiedades de transición

Para usar transiciones en CSS, puedes usar las distintas propiedades de transición o la propiedad de atajo transition.

propiedad-transición

La propiedad transition-property especifica los estilos que se deben migrar.

.my-element {
  transition-property: background-color;
}

transition-property acepta uno o más nombres de propiedades CSS en una lista separada por comas.

De manera opcional, puedes usar transition-property: all para indicar que cada propiedad debe realizar una transición.

transition-duration

La propiedad transition-duration se usa para definir el tiempo que tomará completar una transición.

transition-duration acepta unidades de tiempo, ya sea en segundos (s) o milisegundos (ms), y el valor predeterminado es 0s.

transition-timing-function

Usa la propiedad transition-timing-function para variar la velocidad de una transición de CSS en el transcurso de transition-duration.

De forma predeterminada, CSS realizará la transición de tus elementos a una velocidad constante (transition-timing-function: linear). Sin embargo, las transiciones lineales pueden terminar viéndose algo artificiales: en la vida real, los objetos tienen peso y no pueden detenerse ni comenzar instantáneamente. Tener una mayor facilidad para entrar o salir de una transición puede hacer que las transiciones sean más enérgicas y naturales.

Nuestro módulo sobre animación CSS tiene una buena descripción general de las funciones de tiempo.

Puedes usar las DevTools para experimentar con diferentes funciones de tiempo en tiempo real.

retraso-de-transición

Usa la propiedad transition-delay para especificar la hora a la que comenzará una transición. Si no se especifica transition-duration, las transiciones comenzarán instantáneamente porque el valor predeterminado es 0s. Esta propiedad acepta una unidad de tiempo, por ejemplo, segundos (s) o milisegundos (ms).

Esta propiedad es útil para escalonar las transiciones, lo que se logra estableciendo un transition-delay más largo para cada elemento posterior en un grupo.

transition-delay también es útil para la depuración. Establecer la demora en un valor negativo puede iniciar una transición más adelante en el cronograma.

abreviación: transición

Como la mayoría de las propiedades de CSS, existe una versión abreviada. transition combina transition-property, transition-duration, transition-timing-function y transition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

¿Qué puedes hacer y qué no hacer la transición?

Al escribir CSS, puedes especificar las propiedades que deben tener transiciones animadas. Consulta esta lista de MDN de propiedades de CSS que se pueden animar.

En general, solo es posible realizar la transición de elementos que pueden tener un "estado intermedio" entre su estado inicial y final. Por ejemplo, es imposible agregar transiciones para font-family, porque no está claro cuál es el "estado intermedio" entre serif y monospace. Por otro lado, es posible agregar transiciones para font-size porque su unidad es una longitud entre la que se puede interpolar.

Estas son algunas propiedades comunes que puedes transferir.

Transformar

La propiedad de CSS transform suele cambiarse porque es una propiedad acelerada por la GPU que da como resultado una animación más fluida que también consume menos batería. Esta propiedad te permite ajustar la escala, rotar, trasladar o sesgar un elemento de manera arbitraria.

Consulta la sección sobre transformaciones en nuestro módulo Functions.

Color

Antes, durante y después de la interacción, el color puede ser un excelente indicador del estado. Por ejemplo, un botón puede cambiar de color si se desplaza sobre él. Este cambio de color puede indicarle al usuario que se puede hacer clic en el botón.

Las propiedades color, background-color y border-color son solo algunos de los lugares en los que el color puede al momento de la interacción.

Consulta nuestro módulo sobre color.

Sombras

A menudo, se realiza una transición de sombras para indicar un cambio de elevación, como el enfoque del usuario.

Consulta nuestro módulo sobre las sombras.

Filtros

filter es una potente propiedad de CSS que te permite agregar efectos gráficos sobre la marcha. La transición entre diferentes estados de filter puede crear resultados bastante impresionantes.

Consulta nuestro módulo sobre filtros.

Activadores de transición

Tu CSS debe incluir un cambio de estado y un evento que active ese cambio de estado para que se activen las transiciones de CSS. Un ejemplo típico de un activador de este tipo es la pseudoclase :hover. Esta seudoclase coincide cuando el usuario coloca el cursor sobre un elemento.

A continuación, se incluye una lista de algunas pseudoclases y eventos que pueden activar cambios de estado en tus elementos.

• :hover: Coincide si el cursor está sobre el elemento.
• :focus: Coincide si el elemento está enfocado.
• :focus-within : Coincide si el elemento o cualquiera de sus elementos subordinados son enfocados.
• :target: Coincide cuando el fragmento de la URL actual coincida con el ID del elemento.
• :active: Coincide cuando se activa el elemento (por lo general, cuando el elemento cuando presiones el mouse).
• Cambio de class desde JavaScript: cuando el class de CSS de un elemento cambia mediante JavaScript, CSS realizará la transición de las propiedades aptas que hayan cambiado.

Diferentes transiciones para entrar y salir

Si configuras diferentes propiedades de transition cuando colocas el cursor sobre un elemento o lo enfocas, podrás crear algunos efectos interesantes.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

Consideraciones de accesibilidad

Las transiciones de CSS no son para todo el mundo. Para algunas personas, las transiciones y las animaciones pueden causar mareos o molestias. Afortunadamente, CSS tiene una función multimedia llamada prefers-reduced-motion que detecta si un usuario indicó que prefiere menos movimiento desde su dispositivo.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

Consulta nuestra entrada de blog prefers-reduced-motion: A veces, menos movimiento es más para obtener más información sobre esta función multimedia.

Consideraciones de rendimiento

Al trabajar con transiciones de CSS, es posible que encuentres problemas de rendimiento si agregas transiciones para ciertas propiedades de CSS. Por ejemplo, cuando cambian propiedades como width o height, envían contenido al resto de la página. Esto obliga a CSS a calcular las posiciones nuevas para cada elemento afectado en cada fotograma de la transición. Siempre que sea posible, te recomendamos que uses propiedades como transform y opacity en su lugar.

Consulta nuestra guía sobre animaciones de CSS de alto rendimiento para obtener información detallada sobre este tema.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre transiciones