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 elclass
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
¿Qué propiedad de transición se usa para especificar la aceleración?
animation-ease
transition-duration
transition-easing
transition-timing-function
transition-cubic-bezier
Se recomienda usar transition-property: all
Se puede realizar la transición de todas las propiedades.