Tal vez has notado que, al terminar una animación en tu página web, los elementos vuelven a su estado inicial. Si es así, entonces necesitas conocer la propiedad animation fill mode. Esta propiedad te da control en los estilos de una animación aplicados a un elemento antes y después de que se ejecute. En este artículo te conteremos qué es animation fill mode en CSS, para qué sirve y cómo puedes usarla para darle un toque más profesional y controlado a tus animaciones.
¿Qué es animation fill mode en CSS?
Animation fill mode en CSS es la propiedad que define cómo se deben aplicar los estilos de una animación antes de que comience o después de que termine. Dicho de otra manera, te permite decidir si los estilos de tu animación afectan al elemento una vez finalizada o si todo vuelve al estado original.
Por lo general, las animaciones vienen sin esta propiedad, de manera que se reproducen y, al terminar, los elementos vuelven a su configuración original. Sin embargo, con animation fill mode, puedes evitar este “reseteo” y mantener los estilos que hayas definido en los keyframes.
Sintaxis de animation fill mode en CSS
En general, la sintaxis de las propiedades de animación en CSS es bastante sencilla y animation fill mode no es la excepción:
selector {
animation-fill-mode: valor;
}Valores principales de animation fill mode en CSS
Ahora, veamos cuáles son los principales valores de esta propiedad y para qué sirve cada uno:
none
Se trata del valor por defecto. Aquí, el elemento no conserva ningún estilo relacionado con la animación fuera de su tiempo de ejecución. Básicamente, olvida que ha sido animado.
animation-fill-mode: none;forwards
Al terminar la animación, el elemento mantiene los estilos del último fotograma clave. Este valor es perfecto si quieres que la animación tenga un “efecto final”.
Por ejemplo, si animas un botón para que crezca y cambie de color al cargar la página, puedes usar forwards para que conserve su nuevo estilo.
animation-fill-mode: forwards;backwards
Antes de que comience la animación, el elemento adopta los estilos definidos en el primer fotograma clave. Este valor es útil cuando usas animation-delay y quieres que el elemento adopte los estilos de la animación mientras espera.
Por ejemplo, si tu animación tiene un retraso de 2 segundos, con backwards, el elemento adoptará los estilos iniciales durante ese tiempo de espera.
animation-fill-mode: backwards;both
Este valor combina forwards y backwards, haciendo que el elemento adopte los estilos del primer fotograma clave antes de la animación y los del último después de que finalice.
El valor both es útil, por ejemplo, si quieres que un texto aparezca, cambie de color y mantenga su estilo final después de la animación.
animation-fill-mode: both;¿Por qué usar animation fill mode?
Si todavía te preguntas por qué deberías incluir esta propiedad en tu código, te traemos algunas razones que seguro te convencerán:
Da mayor control creativo
Con animation fill mode, puedes definir con precisión qué sucede con los estilos antes de que empiece la animación y después de que termina, lo que es muy útil si quieres evitar que los elementos vuelvan abruptamente a su estado inicial. Por ejemplo, si animas un botón para que crezca al pasar el cursor, puedes mantener el tamaño final en lugar de que “salte” de vuelta al original. Así, el resultado se ve mucho más fluido y profesional.
Genera una experiencia de usuario más fluida
Cuando las animaciones se comportan de forma intuitiva y sin sobresaltos, la experiencia de navegación mejora notablemente, lo que genera una interacción más atractiva y agradable para el usuario. Al final, son estos pequeños toques los que harán que tu diseño destaque y sea memorable.
Requiere menos código adicional
Si no quieres complicarte con JavaScript o duplicar reglas CSS para mantener un estilo después de una animación, esta propiedad te permite ahorrar líneas de código y esfuerzo. Por ejemplo, si usas animation-fill-mode: forwards, el estado final de la animación se mantiene sin que necesites escribir una regla adicional. En ese sentido, es una solución eficiente que optimiza tu flujo de trabajo y mantiene tu código limpio y fácil de leer.
Como conclusión, la propiedad animation fill mode en CSS te da un control total sobre el comportamiento de tus animaciones antes y después de su ejecución. Si estás dando tus primeros pasos con animaciones en CSS, no dudes en experimentar con esta propiedad y combinarla con otras propiedades como animation-duration y animation-delay.
Puedes seguir aprendiendo sobre este y otras herramientas de CSS y HTML en nuestro Bootcamp de Desarrollo Web. Nuestros cursos están pensados para que puedas formarte en poco tiempo en los lenguajes de programación y las herramientas más demandadas en el sector del desarrollo web. Únete ahora y empieza una nueva carrera en un campo con grandes oportunidades laborales.
¡No esperes más para empezar tu nueva carrera en el sector IT!
