Animation Fill Mode

¿Dónde está mi elemento antes y después?

Imagina que animas la aparición de un modal. Le dices al navegador: "en el 0% ten opacidad 0, y en el 100% ten opacidad 1". La animación dura 1 segundo, se ejecuta perfectamente, el modal aparece... y cuando llega al 100%, ¡puf! desaparece instantáneamente, volviendo a su estado original oculto.

Este es uno de los comportamientos más desconcertantes para quienes empiezan con CSS Animations. Por defecto, una animación no altera los estilos reales del elemento; solo los disfraza temporalmente mientras se está ejecutando. animation-fill-mode es la propiedad que usas para indicarle al navegador que esos estilos animados deben persistir fuera del tiempo de la animación.

Los cuatro modos de persistencia

• ✦ none: (Por defecto) Ningún estilo de la animación se aplica antes de que empiece ni después de que termine.
• ✦ forwards: El más usado. Le dice al navegador: "cuando termines la animación, quédate congelado en el último fotograma clave que ejecutaste". Obligatorio para modales que entran, elementos que desaparecen (fade out) y cualquier cosa que no deba resetearse.
• ✦ backwards: Aplica durante el tiempo de espera (delay). Si tu animación tiene un delay de 2s y en el 0% es invisible, backwards fuerza a que el elemento sea invisible durante esos 2s de espera. Sin él, el elemento sería visible 2s y de repente parpadearía a invisible para arrancar la animación.
• ✦ both: Aplica ambos comportamientos. El elemento adopta el estado inicial durante el delay y se queda con el estado final cuando termina. La opción más segura para secuencias de entrada completas.

Una regla de oro para la UI

Si un elemento entra a la pantalla para quedarse (como un menú lateral), necesitas forwards. Si ese elemento entra con retraso como parte de un grupo (staggering), necesitas both. Memorizar esta distinción te ahorrará horas buscando por qué tus componentes parpadean al cargar la página.