Ejemplo
Animación de algo que se mueve de un lugar a otro y tienen que permanecer allí:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Inténtalo tú mismo " Definición y Uso
La propiedad, llenado y el modo de animación especifica un estilo para el elemento cuando la animación no se ejecuta (when it is finished, or when it has a delay) .
Por defecto, las animaciones CSS no afectan el elemento hasta el primer fotograma clave se "played" , y luego se detiene una vez que el último fotograma clave ha completado. La propiedad-fill-mode animación puede anular este comportamiento.
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.animationFillMode="forwards" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
sintaxis CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| none | Valor por defecto. La animación no se aplicará ningún estilo al elemento de destino antes o después de la ejecución |
| forwards | Después de que los extremos de animación (determined by animation-iteration-count) , la animación se aplicarán los valores de las propiedades, por el momento la animación terminó |
| backwards | La animación se aplicarán los valores de las propiedades definidas en el fotograma clave que iniciará la primera iteración de la animación, durante el período definido por la animación de retardo. Estos son o bien los valores de la del fotograma clave (when animation-direction is "normal" or "alternate") o los del fotograma clave que (when animation-direction is "reverse" or "alternate-reverse") |
| both | La animación se ajustará a las reglas para tanto hacia adelante como hacia atrás. Es decir, que extenderá las propiedades de animación en ambas direcciones |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS3 tutorial: CSS3 Animaciones
Referencia HTML DOM: animationFillMode property