Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.
Definici贸n
La propiedad CSS animation-fill-mode
especifica el modo en que una animaci贸n CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecuci贸n.
Valor inicial | none |
---|---|
Applies to | todos los elementos y los pseudoelementos ::before y ::after |
Heredable | no |
Media | visual |
Valor calculado | como se especifica |
Animation type | discrete |
Canonical order | el orden 煤nico no-ambig眉o definido por la gram谩tica formal |
Sintaxis
Formal syntax: <single-animation-fill-mode>#where
<single-animation-fill-mode> = none | forwards | backwards | both
animation-fill-mode: none animation-fill-mode: forwards animation-fill-mode: backwards animation-fill-mode: both El caracter # indica que pueden darse varios valores separados por comas. Cada uno de los valores se aplicar谩 en el mismo orden en que se ha declarado en la propiedad 'animation' animation-fill-mode: none, backwards animation-fill-mode: both, forwards, none
Valores
none
- La animaci贸n no aplicar谩 los estilos antes ni despu茅s de su ejecuci贸n.
forwards
- El objeto sobre el que se aplica la animaci贸n quedar谩 con los valores y estilos que le aplique el 煤ltimo keyframe de la ejecuci贸n de la animaci贸n. El 煤ltimo valor depender谩 del valor de
animation-direction
yanimation-iteration-count
:animation-direction
animation-iteration-count
ultimo keyframe encontrado normal
even o odd 100%
orto
reverse
even o odd 0%
orfrom
alternate
even 0%
orfrom
alternate
odd 100%
orto
alternate-reverse
even 100%
orto
alternate-reverse
odd 0%
orfrom
backwards
- La animaci贸n aplicar谩 los valores definidos en el primer keyframe tan pronto como se aplique al objeto, y los retendr谩 durante el tiempo de
animation-delay
. El primer keyframe depender谩 del valor deanimation-direction
:animation-direction
primer keyframe normal
oalternate
0%
orfrom
reverse
oalternate-reverse
100%
orto
both
- La animaci贸n seguir谩 las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animaci贸n en ambas direcciones.
Ejemplos
Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo. Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteraci贸n queden en su estado final mejor que en el estado inicial.
HTML
<p>Mueve el raton sobre la caja gris</p>
<div class="demo">
<div class="grows">Esto s贸lo crece</div>
<div class="growsandstays">Esto crece y se queda grande</div>
</div>
CSS
.demo {
border-top: 100px solid #ccc;
height: 300px;
font-family: sans-serif;
}
@keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
@-webkit-keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}
Especificaciones
Especificaci贸n | Estado | Comentario |
---|---|---|
CSS Animations La definici贸n de 'animation-fill-mode' en esta especificaci贸n. |
Working Draft |
Compatibilidad entre navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Caracter铆stica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Soporte b谩sico | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
Caracter铆stica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | ? |