Ejemplo
Cambiar la propiedad animationFillMode de un <div> elemento:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Inténtalo tú mismo " Definición y Uso
La propiedad animationFillMode especifica que aplican estilos 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 afectarán el elemento que está animando hasta el primer fotograma clave se "played" , y luego se detiene una vez que le afecte el último fotograma clave ha completado. La propiedad animationFillMode puede anular este comportamiento.
Soporte del 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 Moz especifican la primera versión que trabajó con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | No soportado | 16.0 5,0 Moz | No soportado | 30.0 |
Sintaxis
Devolver la propiedad animationFillMode:
object .style.animationFillMode Establecer la propiedad animationFillMode:
object .style.animationFillMode="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 a la meta antes o después de que se esté ejecutando |
| forwards | Después de que los extremos de animación (determined by animation-iteration-count) , la animación se aplicarán los valores de la propiedad, por el momento la animación terminó |
| backwards | La animación se aplicará a los valores de las propiedades definidas en el fotograma clave que se 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 de fotograma clave (when animation-direction is "normal" or "alternate") o los de la de fotogramas clave (when animationDirection 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. Lea acerca de heredar |
Detalles técnicos
| Valor por defecto: | ninguna |
|---|---|
| Valor de retorno: | Una cadena, que representa la propiedad-fill-modo de animación de un elemento |
| Versión CSS | CSS3 |
Páginas relacionadas
Referencia CSS: animation-fill-mode property
<Estilo de objeto