Propiedad CSS animation-fill-mode

La propiedad animation-fill-mode define cómo una animación CSS aplica estilos a su objetivo fuera del tiempo en que realmente se ejecuta, es decir, antes de que comience y después de que termine.

Por defecto, una animación @keyframes solo aplica estilos a un elemento mientras se reproduce. En el momento en que la animación termina, el elemento vuelve bruscamente a los estilos que definen sus reglas CSS normales. Si se establece un animation-delay, el elemento también muestra sus estilos normales durante ese período de espera. animation-fill-mode permite cambiar ese comportamiento para que el elemento pueda mantener el último fotograma tras finalizar, o adoptar el primero antes de comenzar. Es una de las propiedades CSS3.

Por qué importa animation-fill-mode

Un problema frecuente: se anima un cuadro de invisible a visible, pero en cuanto termina la animación desaparece de nuevo, porque la regla subyacente sigue indicando opacity: 0. Establecer animation-fill-mode: forwards mantiene el elemento en su fotograma final para que permanezca visible. Esta es la razón más habitual por la que se recurre a esta propiedad.

Los cuatro valores significativos se corresponden claramente con cuándo se retiene un fotograma:

none (valor por defecto) — el elemento usa sus estilos normales antes y después de la animación. Los fotogramas clave solo se aplican mientras se reproduce.
forwards — tras finalizar la animación, el elemento conserva los estilos del último fotograma clave en el que terminó (el fotograma to/100% en una ejecución normal). El fotograma elegido depende de animation-iteration-count y animation-direction.
backwards — durante el período animation-delay previo al inicio de la animación, el elemento ya muestra los estilos del primer fotograma clave (depende de animation-direction).
both — aplica las reglas de forwards y backwards: el primer fotograma se mantiene antes de que termine el retraso, y el último fotograma se mantiene después de que la animación finalice.

Cuando se proporcionan varios valores separados por comas en la forma abreviada animation, cada modo de relleno se aplica a la animación correspondiente indicada en animation-name.

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

Sintaxis

Sintaxis de la propiedad CSS animation-fill-mode

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

<!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>

Pruébalo tú mismo »

Con forwards, el cuadro termina 200 px más abajo y en verde, y permanece así en lugar de volver a su posición inicial con el color azul.

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

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

backwards solo tiene un efecto visible cuando existe un animation-delay: durante el retraso, el elemento ya muestra el primer fotograma clave. Aquí, el cuadro ya está en su posición from y la página espera 2 segundos antes de que comience el movimiento.

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

Pruébalo tú mismo »

Durante el retraso de 2 segundos, el cuadro está en top: 0 y es azul —el primer fotograma clave— en lugar del estilo verde a 200 px de la regla propia del elemento.

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

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

both combina los dos: el primer fotograma clave se mantiene durante el retraso, luego se ejecuta la animación y el último fotograma se mantiene después.

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

Valores

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

Práctica

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

forwardsbackwardsalternate