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

Capítulo 19. Animación

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

Las transiciones CSS , tratadas en el capítulo anterior, permiten animaciones sencillas que se activan por cambios en el estado del DOM y pasan de un estado inicial a un estado final. Las animaciones CSS se parecen a las transiciones en que los valores de las propiedades CSS cambian con el tiempo, pero las animaciones proporcionan mucho más control sobre la forma en que se producen esos cambios. En concreto, las animaciones CSS de fotogramas clave nos permiten decidir si una animación se repite y cómo, nos dan un control granular sobre lo que ocurre a lo largo de la animación, y mucho más. Mientras que las transiciones provocan cambios implícitos en los valores de las propiedades, las animaciones se ejecutan explícitamente cuando se aplican animaciones de fotogramas clave.

Con las animaciones CSS, puedes cambiar valores de propiedades que no formen parte del pre o postestado establecido de un elemento. Los valores de propiedad establecidos en el elemento animado no tienen por qué formar parte de la progresión de la animación. Por ejemplo, cuando se utiliza una transición, al pasar del negro al blanco sólo se animará a través de varios tonos de gris. Con la animación, ese mismo elemento no tiene por qué ser blanco o negro, ni siquiera estar entre tonos de gris durante la animación.

Aunque puedes pasar por tonos de gris, en lugar de eso podrías ...