animation-fill-mode

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 inicialnone
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel 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 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
normalalternate 0% or from
reversealternate-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

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)
? ? ?

Ver tambi茅n