CSS3 animation-fill-mode Propiedad

Ejemplo

Mueve un objeto de un lugar a otro con animación y haz que se quede allí:

animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /*Safari y Chrome*/

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite la propiedad.

El número que aparece antes de -webkit-, -ms- o -moz- corresponde a la primera versión del navegador que admite la propiedad con ese 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-

Definición y uso

La propiedad animation-fill-mode especifica el estilo que se aplica a un elemento cuando la animación no se está ejecutando (cuando ha finalizado o cuando hay un retraso antes de que comience).

De forma predeterminada, una animación CSS no afecta al elemento hasta que se reproduce el primer fotograma clave, y deja de afectarlo después de que se complete el último fotograma clave. La propiedad animation-fill-mode puede anular este comportamiento.

Valor predeterminado:	none
Herencia:	no
Animable:	No. VéaseAnimable (animatable)。
Versión:	CSS3
Sintaxis de JavaScript:	object.style.animationFillMode="forwards" Pruébalo

Sintaxis CSS

Valores de la propiedad

Valor	Descripción
none	Valor predeterminado. La animación no aplica ningún estilo al elemento de destino antes ni después de que se ejecute.
forwards	Después de que finalice la animación (según lo defina animation-iteration-count), la animación aplicará los valores de la propiedad.
backwards	La animación aplicará los valores de propiedad definidos en el fotograma clave de la primera iteración de la animación durante el período definido por animation-delay. Estos son los valores del fotograma clave `from` (cuando animation-direction es "normal" o "alternate") o los valores del fotograma clave `to` (cuando animation-direction es "reverse" o "alternate-reverse").
both	La animación sigue las reglas de `forwards` y `backwards`. Es decir, la animación extiende las propiedades de la animación en ambas direcciones.
initial	Establece esta propiedad a su valor predeterminado. Véaseinitial。
inherit	Hereda esta propiedad del elemento padre. Véaseinherit。

CSSPropiedad