Propiedad Style animationFillMode

Definición y uso

animationFillMode La propiedad especifica los estilos que se aplicarán al elemento cuando la animación no se reproduzca (al final de la animación, o con "retraso").

Por defecto, las animaciones CSS no afectan al elemento que está animando antes de que se reproduzca el primer claveframe, y luego de que se complete el último claveframe, dejan de afectar al elemento.animationFillMode La propiedad puede anular este comportamiento.

Ejemplo

Cambiar la propiedad animationFillMode del elemento <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

Pruebe usted mismo

Sintaxis

Retornar la propiedad animationFillMode:

object.style.animationFillMode

Establecer la propiedad animationFillMode:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Valor de propiedad

Valor Descripción
none Valor predeterminado. La animación no aplicará ningún estilo al objetivo antes o después de su ejecución.
forwards Después de que la animación finalice (determinado por animation-iteration-count), la animación aplicará este valor de propiedad en el momento final de la animación.
backwards

Dentro del período de tiempo definido por animation-delay, la animación aplicará los valores de las propiedades definidas en el claveframe, que comenzarán la primera iteración de la animación.

Estos son los valores de los claveframes (cuando la dirección de la animación es "normal" o "alternate") o los valores hasta los claveframes (cuando la dirección de la animación es "reverse" o "alternate-reverse").
both La animación seguirá las reglas hacia adelante y hacia atrás. Es decir, se extenderá en ambas direcciones las propiedades de animación.
initial Establezca esta propiedad en su valor predeterminado. Consulte initial.
inherit Hereda esta propiedad del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: none
Valor de retorno: Cadena que representa el Atributo animation-fill-mode.
Versión de CSS: CSS3

Compatibilidad del navegador

animationFillMode Es una característica de CSS3 (1999).

Todos los navegadores lo soportan completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Soporte Soporte Soporte Soporte Soporte 11

Páginas relacionadas

Manual de referencia CSS:Atributo animation-fill-mode