Propriedade animation-fill-mode: O que acontece antes e depois da animação?

Defina o estado do elemento antes e depois da animação.

Você já sabe como criar e controlar a reprodução da sua animação. Mas o que acontece com o elemento antes da animação começar e depois que ela termina (especialmente se não for infinita)? É para isso que serve a propriedade animation-fill-mode.

A animation-fill-mode é como as "regras de permanência" da sua animação. Ela define se o elemento deve manter os estilos do primeiro quadro-chave (0% ou from) antes de começar, e/ou se deve manter os estilos do último quadro-chave (100% ou to) depois que a animação termina. Sem essa propriedade, o elemento geralmente retorna ao seu estado original antes e depois da animação.

Como funciona animation-fill-mode

Esta propriedade aceita as palavras-chave none, forwards, backwards e both.

Valores possíveis:

  1. none (padrão): O elemento não aplica nenhum estilo da animação antes de começar ou depois de terminar. Ele retorna ao seu estado original.
  2. forwards: O elemento manterá os valores de propriedade definidos no último quadro-chave (100% ou to) da animação, após ela ter terminado.
  3. backwards: O elemento aplicará os valores de propriedade definidos no primeiro quadro-chave (0% ou from) da animação, durante o período de animation-delay.
  4. both: O elemento aplicará as regras de forwards e backwards. Ou seja, ele manterá os estilos do primeiro quadro-chave durante o atraso e os estilos do último quadro-chave após a animação terminar.

Sintaxe:

.elemento {
  animation-fill-mode: <valor>;
}

Exemplos:

Vamos usar uma animação simples que move uma caixa e muda sua cor.

@keyframes deslizarCor {
  from {
    transform: translateX(0);
    background-color: blue;
  }
  to {
    transform: translateX(100px);
    background-color: red;
  }
}

Cenário Base (sem animation-fill-mode ou com none):

.box {
  width: 100px;
  height: 100px;
  background-color: gray; /* Cor original do elemento */
  /* ... outras propriedades ... */

  animation-name: deslizarCor;
  animation-duration: 2s;
  animation-delay: 1s; /* Para observar o estado antes de começar */
  animation-iteration-count: 1; /* Para observar o estado depois de terminar */
  animation-fill-mode: none; /* Ou omitido, pois é o padrão */
}

Resultado:

  • Antes da animação (durante o delay): A caixa permanece cinza (sua cor original).
  • Durante a animação: A caixa se move e muda de azul para vermelho.
  • Depois da animação: A caixa volta instantaneamente para sua posição original e cor cinza.

1. forwards:

.box {
  /* ... outras propriedades ... */
  animation-name: deslizarCor;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /* Mantém o estado final */
}

Resultado:

  • Antes da animação (durante o delay): A caixa permanece cinza (sua cor original).
  • Durante a animação: A caixa se move e muda de azul para vermelho.
  • Depois da animação: A caixa permanece na posição final (100px para a direita) e com a cor vermelha.

2. backwards:

.box {
  /* ... outras propriedades ... */
  animation-name: deslizarCor;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: backwards; /* Aplica o estado inicial durante o delay */
}

Resultado:

  • Antes da animação (durante o delay): A caixa já está na posição inicial (0px) e com a cor azul (estilos do from ou 0%).
  • Durante a animação: A caixa se move e muda de azul para vermelho.
  • Depois da animação: A caixa volta instantaneamente para sua posição original e cor cinza.

3. both:

.box {
  /* ... outras propriedades ... */
  animation-name: deslizarCor;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: both; /* Aplica estado inicial durante delay E mantém estado final */
}

Resultado:

  • Antes da animação (durante o delay): A caixa já está na posição inicial (0px) e com a cor azul (estilos do from ou 0%).
  • Durante a animação: A caixa se move e muda de azul para vermelho.
  • Depois da animação: A caixa permanece na posição final (100px para a direita) e com a cor vermelha.

Dicas para animation-fill-mode:

  • Animações de Entrada/Saída: forwards é muito útil para animações de entrada (onde o elemento deve permanecer no estado final animado) e backwards para animações de saída (onde o elemento deve começar no estado inicial animado antes de desaparecer).
  • Sequências: both é ótimo para garantir que um elemento esteja no estado correto antes de uma animação começar e permaneça no estado correto depois que ela termina, especialmente em cadeias de animações.
  • animation-iteration-count: infinite;: Para animações infinitas, animation-fill-mode geralmente não tem efeito visível, pois a animação nunca "termina".

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-fill-mode</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f2f5;
      margin: 0;
    }

    /* --- Definição da Animação de Deslizar e Mudar Cor --- */
    @keyframes deslizarCor {
      from {
        transform: translateX(0);
        background-color: #007bff; /* Azul */
      }
      to {
        transform: translateX(150px);
        background-color: #dc3545; /* Vermelho */
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #6c757d; /* Cor original cinza */
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      margin: 10px;
      animation-name: deslizarCor;
      animation-duration: 2s;
      animation-delay: 1s; /* Atraso para observar o estado inicial */
      animation-iteration-count: 1; /* Roda apenas uma vez para observar o estado final */
      animation-timing-function: ease-in-out;
    }

    /* --- Exemplos de animation-fill-mode --- */

    .box-none {
      animation-fill-mode: none; /* Padrão: volta ao original */
    }

    .box-forwards {
      animation-fill-mode: forwards; /* Mantém o estado final */
    }

    .box-backwards {
      animation-fill-mode: backwards; /* Aplica o estado inicial durante o delay */
    }

    .box-both {
      animation-fill-mode: both; /* Aplica inicial durante delay E mantém final */
    }
  </style>
</head>
<body>
  <div class="box box-none">None</div>
  <div class="box box-forwards">Forwards</div>
  <div class="box box-backwards">Backwards</div>
  <div class="box box-both">Both</div>
</body>
</html>

Resultado:

  • Observe o estado de cada caixa durante o atraso de 1 segundo e depois que a animação de 2 segundos termina.
  • Note como forwards e both fazem a caixa permanecer no estado final, e como backwards e both fazem a caixa assumir o estado inicial durante o atraso.

Com animation-fill-mode, você tem controle total sobre o comportamento do seu elemento antes e depois da animação, garantindo que ele se integre perfeitamente ao seu design.