Propiedad CSS animation-fill-mode
Ejemplo
Deje que el elemento <div> conserve los valores de estilo del último fotograma clave cuando finalice la animación:
div {
animation-fill-mode: forwards;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La animation-fill-modepropiedad especifica un estilo para el elemento cuando la animación no se está reproduciendo (antes de que comience, después de que finalice o ambos).
Las animaciones CSS no afectan al elemento antes de que se reproduzca el primer fotograma clave o después de que se reproduzca el último fotograma clave. La animation-fill-modepropiedad puede invalidar este comportamiento.
| Valor por defecto: | ninguna |
|---|---|
| Heredado: | No |
| Animable: | No. Leer sobre animable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | objeto .style.animationFillMode="adelante" |
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 -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
| Property | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Sintaxis CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Valores de propiedad
| Value | Description |
|---|---|
| none | Default value. Animation will not apply any styles to the element before or after it is executing |
| forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
| backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
| both | The animation will follow the rules for both forwards and backwards, extending 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 |
Más ejemplos
Ejemplo
Deje que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación (durante el período de retraso de la animación):
div {
animation-fill-mode: backwards;
}
Ejemplo
Deje que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación y conserve los valores de estilo del último fotograma clave cuando finalice la animación:
div {
animation-fill-mode: both;
}
páginas relacionadas
Tutorial CSS: Animaciones CSS
Referencia HTML DOM: propiedad animationFillMode