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 elclass
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
¿Qué propiedad de transición sirve para especificar la aceleración?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
Es una práctica recomendada usar transition-property: all
all
puede generar problemas de rendimiento y transiciones no deseadas.Se puede realizar la transición de todas las propiedades.
font-family
no pueden realizar la transición.