animation-fill-mode

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.

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 y animation-iteration-count:

animation-direction	animation-iteration-count	ultimo keyframe encontrado
normal	even o odd	100% or to
reverse	even o odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

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 de animation-direction:

animation-direction	primer keyframe
normal o alternate	0% or from
reverse o alternate-reverse	100% or to

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

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!

Ver también

• Usando CSS Animations
• AnimationEvent