Comprensión de las propiedades del modo de relleno de animación
Como se puede ver en la imagen de arriba, el estado cuando se ejecuta la animación es el mismo. Entonces, la diferencia está entre la fase de espera de la animación y la fase posterior a la animación.
Una vez finalizada la animación, "ninguno" y "hacia atrás" regresan al estado inicial, mientras que "adelante" y "hacia atrás" mantienen el estado del último fotograma de la animación.
Entonces, para resumir el uso del modo de relleno de animación:
Modo de relleno de animación: controla el estado antes y después de la ejecución de la animación.
Un proceso de animación se puede dividir en espera de animación, ejecución de animación y final de animación. De forma predeterminada, las animaciones declaradas en @keyframes solo se activarán durante la fase de ejecución de la animación.
-Modo-de-relleno-de-animación: Ninguno
-Predeterminado. Al configurar el retraso de la animación (el propósito de configurar el retraso es distinguir la diferencia entre las etapas de espera de la animación), durante la etapa de espera de la animación, el estado inicial del elemento se conserva y, una vez finalizada la animación, aún regresa al estado inicial del elemento.
-Animation-Fill-Mode: Adelante;
-Al configurar el retraso de la animación, el estado inicial del elemento se conserva durante la fase de espera de la animación y el estado del último fotograma. se conserva después de que finaliza la animación.
-Animación-Relleno-Modo: Hacia atrás;
-Establece el estado del primer fotograma (desde o 0) o el estado del último fotograma (cuando la animación-Dirección: inversa). ;) estado. Una vez finalizada la animación, vuelve al estado inicial del elemento.
-Modo-de-relleno-de-animación: ambos;
-Al configurar el retraso de la animación, el estado del primer fotograma (desde o 0) o el estado del último fotograma (tiempo de animación). -dirección: inversa ;) estado. Una vez finalizada la animación, mantenga el estado del último fotograma. Como puede ver, es una combinación de avance y retroceso.
Caso de uso del modo de relleno de animación: