Transiciones

El podcast de CSS 044: Transiciones

Al interactuar con un sitio web, es posible que notes que muchos elementos tienen state. Por ejemplo, los menús desplegables pueden estar abiertos o cerrados. Es posible que el color de los botones cambie cuando se enfoca o cuando se 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 al proporcionar orientación visual, soporte e indicios sobre la causa y el efecto de la interacción.

Propiedades de transición

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

propiedad-de-transición

La propiedad transition-property especifica qué estilos se deben realizar la transición.

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

El elemento 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 todas las propiedades deben realizar la transición.

duración de la transición

La propiedad transition-duration se usa para definir el tiempo que tardará una transición en completarse.

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

función-de-tiempo-de-transición

Usa la propiedad transition-timing-function para variar la velocidad de una transición de CSS a lo largo 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 parecer algo artificiales, aunque en la vida real, los objetos tienen peso y no pueden detenerse ni comenzar de inmediato. Comenzar o salir de una transición puede hacer que tus transiciones sean más animadas y naturales.

En nuestro módulo sobre animación de CSS, encontrarás una buena descripción general de las funciones de sincronización.

Puedes usar DevTools para experimentar con diferentes funciones de sincronización en tiempo real.

retraso-de-transición

Usa la propiedad transition-delay para especificar el momento en que comenzará una transición. Si no se especifica transition-duration, las transiciones comenzarán de inmediato 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 las transiciones escalonadas que se logran estableciendo un transition-delay más largo para cada elemento posterior de 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 en el cronograma.

abreviación: transición

Como la mayoría de las propiedades de CSS, hay 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é se puede hacer y qué no se puede hacer?

Al escribir código CSS, puedes especificar qué propiedades deben tener transiciones animadas. Consulta esta lista de MDN de propiedades de CSS que se pueden animar.

En general, solo es posible hacer la transición de elementos que pueden tener un "estado intermedio" entre los estados inicial y final. Por ejemplo, es imposible agregar transiciones para font-family porque no está claro cómo debería verse el "estado medio" entre serif y monospace. Por otro lado, es posible agregar transiciones para font-size porque su unidad es una longitud entre la cual se puede interpolar.

Estas son algunas propiedades comunes que puedes cambiar.

Transformación

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

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

Color

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

Las propiedades color, background-color y border-color son solo algunos lugares en los que se puede hacer la transición del color tras la interacción.

Consulta nuestro módulo sobre el color.

Sombras

A menudo, se realiza una transición de las sombras para indicar el cambio de elevación, por ejemplo, desde el enfoque del usuario.

Consulta nuestro módulo sobre sombras.

Filtros

filter es una propiedad de CSS potente 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 seudoclase :hover. Esta pseudoclase coincide cuando el usuario coloca el cursor sobre un elemento con el cursor.

A continuación, se muestra una lista de algunas seudoclases 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 están enfocados.
• :target: Coincide cuando el fragmento de la URL actual coincide con el ID del elemento.
• :active: Coincide con el momento en que se activa el elemento (por lo general, cuando se presiona el mouse sobre él).
• Cambios de class desde JavaScript: Cuando el class del CSS de un elemento cambia mediante JavaScript, el CSS realiza la transición de las propiedades aptas que cambiaron.

Diferentes transiciones para entrar o salir

Si configuras diferentes propiedades de transition al colocar el cursor sobre un elemento o el enfoque, es posible 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 todos. 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ó preferencia por un menor 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

Cuando trabajes 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 nuevas posiciones para cada elemento afectado en cada fotograma de la transición. Cuando sea posible, te recomendamos que uses propiedades como transform y opacity.

Consulta nuestra guía de animaciones de CSS de alto rendimiento para obtener un análisis detallado de este tema.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las transiciones