Propiedad CSS animation-fill-mode

La propiedad animation-fill-mode establece un estilo para el elemento cuando la animación no se está ejecutando (antes de que comience, después de que termine o ambos).

animation-fill-mode es una de las propiedades de CSS3.

La propiedad animation-fill-mode es la única que afecta al elemento antes de que se reproduzca el primer @keyframe o después de que se reproduzca el último keyframe. Puede asumir los siguientes valores: "forwards" para especificar que el elemento debe conservar los valores de estilo establecidos por el último keyframe (dependiendo de las propiedades animation-iteration-count y animation-direction); "backwards" para especificar que el elemento debe obtener los valores de estilo establecidos por el primer keyframe (depende de animation-direction) y mantenerlos durante el período de animation-delay; "both" para especificar que la animación debe seguir las reglas tanto de "forwards" como de "backwards", y "none" (predeterminado) para especificar que no se aplicarán estilos al elemento antes o después de que se ejecute la animación.

Cuando se especifican varios valores separados por comas para las propiedades abreviadas de animación, se aplican a las animaciones correspondientes definidas en animation-name.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a los pseudo-elementos ::before y ::after.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationFillMode = "forwards";

Sintaxis

Sintaxis de la propiedad CSS animation-fill-mode

css

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Ejemplo de la propiedad animation-fill-mode con el valor "forwards":

Ejemplo de la propiedad CSS animation-fill-mode con el valor forwards

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad animation-fill-mode con el valor "backwards":

Ejemplo de la propiedad CSS animation-fill-mode con el valor backwards

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
none	Este es el valor predeterminado. La animación no aplicará ningún estilo al elemento antes y después de que comience.
forwards	Especifica que el elemento debe conservar los valores de estilo establecidos por el último keyframe.
backwards	Especifica que el elemento debe obtener los valores de estilo establecidos por el primer keyframe y mantenerlos durante el período de animation-delay.
both	Especifica que la animación debe seguir las reglas tanto de forwards como de backwards.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

La propiedad animation-fill-mode tiene los siguientes valores, excepto:

forwardsbackwardsalternate

Propiedad CSS animation-fill-mode ​

Sintaxis ​

Ejemplo de la propiedad animation-fill-mode con el valor "forwards": ​

Ejemplo de la propiedad animation-fill-mode con el valor "backwards": ​