Estilo animationFillMode Propiedad
Ejemplo
Cambiando la propiedad animationFillMode de un elemento <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Definición y uso
La propiedad animationFillMode especifica qué estilos se aplicarán al elemento cuando la animación no se esté reproduciendo (cuando finalice o cuando tenga un "retraso").
De forma predeterminada, las animaciones CSS no afectarán el elemento que está animando hasta que se "reproduzca" el primer fotograma clave, y luego dejará de afectarlo una vez que se haya completado el último fotograma clave. La propiedad animationFillMode puede invalidar este comportamiento.
Compatibilidad con 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 de Moz especifican la primera versión que funcionó con un prefijo.
| Property | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintaxis
Devuelve la propiedad animationFillMode:
object.style.animationFillMode
Establezca la propiedad animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Valores de propiedad
| Value | Description |
|---|---|
| none | Default value. The animation will not apply any styles to the target before or after it is executing |
| forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
| backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detalles técnicos
| Valor por defecto: | ninguna |
|---|---|
| Valor devuelto: | Una cadena, que representa la propiedad de modo de relleno de animación de un elemento |
| Versión CSS | CSS3 |
páginas relacionadas
Referencia CSS: propiedad animation-fill-mode