CSS: La Guía Definitiva, 5ª Edición

Capítulo 18. Transiciones

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Las transiciones CSS nos permiten animar las propiedades CSS desde un valor original a un nuevo valor a lo largo del tiempo. Estos cambios hacen que un elemento pase de un estado a otro, en respuesta a un cambio. Esto suele implicar una interacción del usuario, pero también puede deberse a un cambio de clase, ID u otro estado programado.

Normalmente, cuando cambia el valor de una propiedad CSS -cuando se produce un evento de cambio de estilo- el cambio es instantáneo. El nuevo valor de propiedad sustituye a la antigua propiedad en los milisegundos que tarda en repintarse la página (o en refluirse y repintarse, cuando sea necesario). La mayoría de los cambios de valor parecen instantáneos, ya que tardan menos de 16 milisegundos en renderizarse. Incluso si los cambios tardan más que eso (como cuando se sustituye una imagen grande por otra que no está prefijada -lo que no es una transición, sino sólo un rendimiento deficiente-), sigue siendo un único paso de un valor al siguiente. Por ejemplo, al cambiar el color de fondo al pasar el ratón por encima, el fondo cambia inmediatamente de un color a otro, sin transición gradual.

Transiciones CSS

Las transiciones CSS proporcionan una forma de controlar cómo cambia una propiedad de un valor a otro durante un periodo de tiempo. Así, podemos hacer que los valores de las propiedades cambien gradualmente, ...