animation-fill-mode

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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
Animatableno
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
The definition of 'animation-fill-mode' in that specification.
Working Draft  

Compatibilidad entre navegadores

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: teoli, Sebastianz, luigli, jesusr
 Última actualización por: teoli,