Propriedade CSS animation-fill-mode

A propriedade animation-fill-mode define como uma animação CSS aplica estilos ao seu alvo fora do período em que está sendo executada — ou seja, antes de iniciar e após terminar.

Por padrão, uma animação @keyframes só estiliza um elemento enquanto ela está em execução. No momento em que a animação termina, o elemento volta ao que o CSS normal determina. Se um animation-delay estiver definido, o elemento também exibe seus estilos normais durante esse período de espera. A propriedade animation-fill-mode permite alterar esse comportamento para que o elemento possa manter o último quadro após o término, ou adotar o primeiro quadro antes de iniciar. Ela é uma das propriedades CSS3.

Por que animation-fill-mode é importante

Um problema comum: você anima uma caixa de invisível para visível, mas assim que a animação termina ela desaparece novamente — porque a regra subjacente ainda diz opacity: 0. Definir animation-fill-mode: forwards mantém o elemento em seu keyframe final para que ele permaneça visível. Essa é a razão mais comum pela qual as pessoas recorrem a essa propriedade.

Os quatro valores significativos mapeiam claramente para quando um quadro é mantido:

none (padrão) — o elemento usa seus estilos normais antes e depois da animação. Os keyframes só se aplicam durante a reprodução.
forwards — após o término da animação, o elemento mantém os estilos do último keyframe em que parou (o quadro to/100% para uma execução normal). O quadro escolhido depende de animation-iteration-count e animation-direction.
backwards — durante o período de animation-delay antes de a animação iniciar, o elemento já exibe os estilos do primeiro keyframe (depende de animation-direction).
both — aplica as regras de forwards e backwards: o primeiro quadro é mantido antes do término do delay, e o último quadro é mantido após o término da animação.

Quando você fornece ao atalho animation múltiplos valores separados por vírgula, cada modo de preenchimento se aplica à animação correspondente listada em animation-name.

Valor Inicial	none
Aplica-se a	Todos os elementos. Também se aplica aos pseudo-elementos ::before e ::after.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.animationFillMode = "forwards";

Sintaxe

Sintaxe da Propriedade CSS animation-fill-mode

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

Exemplo da propriedade animation-fill-mode com o valor "forwards":

Exemplo da Propriedade CSS animation-fill-mode com o 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>

Experimente Você Mesmo »

Com forwards, a caixa termina 200px mais abaixo e verde — e permanece assim em vez de voltar para sua posição inicial e cor azul.

Exemplo da propriedade animation-fill-mode com o valor "backwards":

Exemplo da Propriedade CSS animation-fill-mode com o valor backwards

backwards só tem efeito visível quando há um animation-delay: durante o delay, o elemento já exibe o primeiro keyframe. Aqui, a caixa já está em sua posição from e a página aguarda 2 segundos antes de o movimento começar.

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

Experimente Você Mesmo »

Durante o delay de 2 segundos, a caixa fica em top: 0 e está azul — o primeiro keyframe — em vez do estilo verde e 200px abaixo da regra do próprio elemento.

Exemplo da propriedade animation-fill-mode com o valor "both":

Exemplo da Propriedade CSS animation-fill-mode com o valor both

both combina os dois: o primeiro keyframe é mantido durante o delay, depois a animação é executada e o último keyframe é mantido em seguida.

<!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	Descrição
none	Este é o valor padrão. A animação não aplicará nenhum estilo ao elemento antes e depois de iniciar.
forwards	Especifica que o elemento deve manter os valores de estilo definidos pelo último keyframe.
backwards	Especifica que o elemento deve obter os valores de estilo definidos pelo primeiro keyframe e mantê-los durante o período de animation-delay.
both	Especifica que a animação deve seguir as regras tanto de forwards quanto de backwards.
initial	Faz com que a propriedade use seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

A propriedade animation-fill-mode possui os seguintes valores, exceto:

forwardsbackwardsalternate