Las animaciones CSS son un método fácil y liviano para agregar estilo a un sitio web. No son demasiado difíciles de implementar y no ralentizan tus páginas, como películas famosas, gifs o animaciones Flash.
Sin embargo, a veces es posible que estas animaciones no se comporten exactamente como esperas o quieres, simplemente por cómo funcionan las animaciones CSS de forma predeterminada.
Por ejemplo, supongamos que quiero animar un automóvil que circula por una pantalla en mi sitio Taxi / Ride Sharing / Delivery. Vea lo que sucede cuando termina la animación:
ver la pluma Modo de relleno de animación: sin modo de relleno de Christina Perricone (@hubspot) en CódigoPen.
¿Viste eso? (Si no, haga clic en Repetición en la esquina inferior derecha). Cuando el automóvil deja de moverse, vuelve a la posición anterior a la animación. Se vería mucho mejor si el auto se quedara al otro lado de la pantalla cuando termine, ¿no es así? ¿Cómo podemos hacer eso?
La respuesta es con la propiedad CSS. modo de relleno de animación. En esta guía, explicaremos qué hace esta propiedad y por qué podría ser una propiedad CSS oculta cuyas animaciones deben funcionar.
¿Qué es el modo de relleno de animación CSS?
A diferencia de otras propiedades de animación, como animation-iteration-number y animation-delay, no está claro en el nombre qué modo de relleno de animación en realidad lo hace. Vamos a explicar.
los modo de relleno de animación La propiedad CSS controla los estilos del elemento animado más allá de su ejecución. En otras palabras, controla la apariencia del elemento antes y/o después de que comience la animación.
De forma predeterminada, la animación CSS aplicará sus estilos solo mientras se ejecuta la animación. Por lo tanto, en el ejemplo anterior, vimos un restablecimiento de automóvil: una vez finalizada la animación, el elemento de imagen volvió a su estilo original (es decir, su posición original). DE modo de relleno de animaciónpodemos cambiarlo.
Sintaxis del modo de relleno de animación CSS
los modo de relleno de animación propiedad se escribe de la siguiente manera:
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
Como con los otros animación-* bienes raíces, modo de relleno de animación se coloca en el bloque de declaración del elemento que desea animar.
Valores del modo de relleno de animación CSS
modo de relleno de animación toma cuatro valores principales: Delantero, espalda, Ambas cosasy No. Desempaquemos cada uno de ellos.
Delantero
Después de asignar modo de relleno de animación: adelante, el objetivo conservará los valores de estilo establecidos en el último fotograma clave de la animación. El elemento no restablecerá sus estilos cuando termine de animarse.
Espera, ¡eso suena exactamente como si necesitáramos animar nuestro auto! Intentemos este ejemplo nuevamente, esta vez con modo de relleno de animación: adelante aplicado.
ver la pluma modo de relleno de animación: adelante de Christina Perricone (@hubspot) en CódigoPen.
Como era de esperar, el automóvil permanece en el lado derecho de la pantalla después de que finaliza la animación.
Observe que la dirección de la animación establecida por dirección de animación determina cómo se ve el cuadro final de la animación. Por ejemplo, si dirección de animación es normal (predeterminado), el último fotograma clave estará en 100% (o abajo). si la direccion es Rotaciónsin embargo, el fotograma clave final (y, por lo tanto, los estilos que se mantienen) es 0% (o Con).
los Delantero value es probablemente el valor más común y útil para esta propiedad. Úselo para evitar que el elemento animado se restablezca visualmente después de que se complete la animación.
espalda
Después de asignar modo de relleno de animación: atrásel elemento de destino asumirá los valores de estilo establecidos por el primer fotograma clave de la animación durante Retraso de animación Punto. Retraso de animación establece el tiempo de retardo para iniciar la animación y modo de relleno de animación válido en ese momento.
Para demostrar esto, agregué algunas reglas adicionales a nuestro ejemplo de automóvil. Es Retraso de animación Con 3s (tres segundos) y estilo extra @fotogramas clave una declaración de que el automóvil está girando (para que parezca que va tan rápido como lo hacen los automóviles).
ver la pluma modo de relleno de animación: atrás de Christina Perricone (@hubspot) en CódigoPen.
DE modo de relleno de animación: atrás cuando se aplica, la imagen adopta los estilos del primer fotograma clave durante este período de retraso de tres segundos. Finalmente, el automóvil vuelve a su estilo anterior a la animación. (Si no lo captó la primera vez, haga clic en Recargar en la esquina inferior derecha.)
los espalda valor no es tan ampliamente utilizado como Delanteropero puede ser útil para secuencias de animación más complejas.
También preste atención a esta configuración dirección de animación: inversa hará que el elemento adopte los estilos del último fotograma clave de la animación en lugar del primer fotograma clave.
Ambas cosas
modo de relleno de animación: ambos aplica los principios de ambos espalda y Delantero: el elemento adopta los estilos del primer fotograma clave antes de que comience la animación y los estilos del último fotograma clave después de que finaliza la animación.
ver la pluma modo de relleno de animación: ambos de Christina Perricone (@hubspot) en CódigoPen.
Este ejemplo se parece al anterior, excepto que el automóvil no se reinicia en último lugar. ¡Camino a seguir!
No
No es el predeterminado para modo de relleno de animación. Esto garantiza que los estilos de animación no se apliquen al elemento antes o después de la secuencia de animación. Puede usar este valor para anular el valor principal; de lo contrario, no es necesario.
inicial y hereda
modo de relleno de animación también toma valores globales Inicial y heredar. Preliminar establece el valor por defecto (No). heredar establece el valor para que sea el mismo que su padre.
Controle sus animaciones en el modo de relleno de animación.
los modo de relleno de animación La propiedad puede no ser la propiedad CSS más efectiva, pero puede resultar necesaria para muchos tipos de animación. Activarlo puede ayudar a que sus animaciones se vean más limpias y evitar que se restablezcan al final de la secuencia. Solo por esta razón, vale la pena saberlo.
