Propriedade animation-timing-function: A 'velocidade' da animação

Você já sabe o "roteiro" (@keyframes), o "ator" (animation-name) e a "duração" (animation-duration) da sua animação. Agora, vamos controlar o ritmo e a sensação da animação. A propriedade animation-timing-function define a curva de aceleração/desaceleração de cada ciclo da animação.

Assim como nas transições, a animation-timing-function é como o "pedal do acelerador" da sua animação. Ela determina como a velocidade da animação muda ao longo do tempo, permitindo que você crie movimentos mais naturais, dramáticos ou até mesmo robóticos.

Como funciona `animation-timing-function`

Esta propriedade aceita palavras-chave predefinidas ou uma função cubic-bezier() personalizada.

Valores possíveis (palavras-chave):

ease (padrão): Começa devagar, acelera no meio e termina devagar. É o comportamento mais comum e natural para a maioria das animações.
linear: A animação ocorre com uma velocidade constante do início ao fim.
ease-in: Começa devagar e acelera até o final.
ease-out: Começa rápido e desacelera até o final.
ease-in-out: Começa devagar, acelera no meio e termina devagar (similar ao ease, mas com aceleração e desaceleração mais simétricas).
step-start: A animação "salta" para o estado final imediatamente no início.
step-end: A animação permanece no estado inicial e "salta" para o estado final apenas no final.
steps(n, <start|end>): Divide a animação em n passos discretos. O segundo parâmetro (start ou end) define se o salto ocorre no início ou no final de cada passo.

Função `cubic-bezier(n, n, n, n)`:

Para um controle ainda mais preciso, você pode definir sua própria curva de aceleração usando a função cubic-bezier(). Ela aceita quatro valores numéricos entre 0 e 1, que representam os pontos de controle de uma curva Bézier cúbica.

Ex: cubic-bezier(0.1, 0.7, 1.0, 0.1)
Existem ferramentas online (como o cubic-bezier.com) que ajudam a visualizar e gerar essas curvas.

Sintaxe:

.elemento {
  animation-timing-function: <valor>;
}

Exemplos:

1. `linear` (velocidade constante):

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* ... outras propriedades ... */

  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* Gira com velocidade constante */
}

Resultado: A caixa gira 360 graus em 2 segundos, repetidamente e com velocidade constante.

2. `ease-in-out` (começa devagar, acelera, termina devagar):

@keyframes moverPulsar {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(100px) scale(1.2); }
  100% { transform: translateX(0) scale(1); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  /* ... outras propriedades ... */

  animation-name: moverPulsar;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; /* Movimento suave no início e no fim */
}

Resultado: A caixa se move e pulsa suavemente, acelerando no meio e desacelerando no início e no fim de cada ciclo.

3. Múltiplas funções de tempo para múltiplas animações:

Se você aplicou múltiplas animações com animation-name (separadas por vírgula), você pode fornecer uma função de tempo para cada uma delas, também separadas por vírgula. A ordem deve corresponder à ordem dos nomes das animações.

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes mudarCor {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.box {
  width: 100px;
  height: 100px;
  /* ... outras propriedades ... */

  animation-name: girar, mudarCor;
  animation-duration: 2s, 3s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, ease-in-out; /* Girar é linear, MudarCor é ease-in-out */
}

Resultado: A animação de giro será constante, enquanto a animação de mudança de cor terá um ritmo suave.

Dicas para `animation-timing-function`:

Realismo: ease e ease-in-out geralmente produzem movimentos mais naturais e orgânicos.
Robótico/Mecânico: linear é bom para movimentos de máquinas ou efeitos que exigem velocidade constante.
Efeitos Especiais: steps() é excelente para animações de digitação, contadores ou efeitos de "stop-motion". cubic-bezier() abre um mundo de possibilidades para efeitos únicos, como "saltos" ou "elásticos".

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-timing-function</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 Movimento --- */
    @keyframes mover {
      0% { transform: translateX(0); }
      50% { transform: translateX(100px); }
      100% { transform: translateX(0); }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      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: mover; /* Todas usarão a animação de mover */
      animation-duration: 2s; /* Todas durarão 2 segundos */
      animation-iteration-count: infinite;
    }

    /* --- Exemplos de animation-timing-function --- */

    .box-ease {
      animation-timing-function: ease;
    }

    .box-linear {
      animation-timing-function: linear;
    }

    .box-ease-in {
      animation-timing-function: ease-in;
    }

    .box-ease-out {
      animation-timing-function: ease-out;
    }

    .box-ease-in-out {
      animation-timing-function: ease-in-out;
    }

    .box-steps {
      animation-timing-function: steps(4, end); /* 4 passos, salta no final de cada passo */
    }

    .box-cubic-bezier {
      animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Exemplo de curva "saltitante" */
    }
  </style>
</head>
<body>
  <div class="box box-ease">ease</div>
  <div class="box box-linear">linear</div>
  <div class="box box-ease-in">ease-in</div>
  <div class="box box-ease-out">ease-out</div>
  <div class="box box-ease-in-out">ease-in-out</div>
  <div class="box box-steps">steps(4, end)</div>
  <div class="box box-cubic-bezier">cubic-bezier</div>
</body>
</html>

Resultado:

Observe como cada caixa se move com um ritmo diferente, ditado pela animation-timing-function.
Note o movimento "passo a passo" da caixa steps() e o efeito "saltitante" da cubic-bezier().

Com animation-timing-function, você adiciona personalidade e realismo às suas animações, controlando o "ritmo" e a "sensação" de cada movimento.

Como funciona animation-timing-function

Valores possíveis (palavras-chave):

Função cubic-bezier(n, n, n, n):