Propriedade transition-timing-function: A 'velocidade' da transição

Controle a curva de aceleração/desaceleração da transição (ease, linear, etc.).

Você já sabe quais propriedades transicionar (transition-property) e por quanto tempo (transition-duration). Agora, vamos falar sobre como essa transição acontece em termos de velocidade. A propriedade transition-timing-function define a curva de aceleração da transição, ou seja, como a velocidade da animação muda ao longo do tempo.

Pense na transition-timing-function como o "pedal do acelerador" da sua transição. Você pode fazer com que ela comece devagar e acelere, comece rápido e desacelere, ou mantenha uma velocidade constante. Isso adiciona um toque de naturalidade e realismo aos seus efeitos.

Como funciona transition-timing-function

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

Valores possíveis (palavras-chave):

  1. ease (padrão): Começa devagar, acelera no meio e termina devagar. É o comportamento mais comum e natural para a maioria das transições.
  2. linear: A transição ocorre com uma velocidade constante do início ao fim.
  3. ease-in: Começa devagar e acelera até o final.
  4. ease-out: Começa rápido e desacelera até o final.
  5. 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).
  6. step-start: A transição "salta" para o estado final imediatamente no início.
  7. step-end: A transição permanece no estado inicial e "salta" para o estado final apenas no final.
  8. steps(n, <start|end>): Divide a transiçã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 {
  transition-timing-function: <valor>;
}

Exemplos:

1. linear (velocidade constante):

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear; /* Velocidade constante */
}

.box:hover {
  width: 200px;
}

Resultado: A largura da caixa aumenta de forma constante, sem aceleração ou desaceleração.

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

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out; /* Suave no início e no fim */
}

.box:hover {
  width: 200px;
}

Resultado: A largura da caixa aumenta suavemente, acelerando no meio e desacelerando no final.

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

Assim como transition-duration, você pode fornecer uma função de tempo para cada propriedade listada em transition-property, separadas por vírgula. A ordem deve corresponder.

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  transform: translateX(0);
  transition-property: background-color, width, transform;
  transition-duration: 0.5s, 1s, 0.8s;
  transition-timing-function: ease, linear, ease-in-out; /* ease para BG, linear para width, ease-in-out para transform */
}

.box:hover {
  background-color: red;
  width: 150px;
  transform: translateX(50px);
}

Resultado: Cada propriedade terá sua própria curva de aceleração.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>transition-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;
    }

    .box {
      width: 120px;
      height: 120px;
      background-color: #007bff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.1em;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition-property: background-color, transform;
      transition-duration: 1s; /* Todas as transições durarão 1 segundo */
    }

    /* --- Exemplos de transition-timing-function --- */

    .box-ease {
      transition-timing-function: ease;
    }
    .box-ease:hover {
      background-color: #28a745;
      transform: translateX(50px) rotate(30deg);
    }

    .box-linear {
      transition-timing-function: linear;
    }
    .box-linear:hover {
      background-color: #dc3545;
      transform: translateX(50px) rotate(30deg);
    }

    .box-ease-in {
      transition-timing-function: ease-in;
    }
    .box-ease-in:hover {
      background-color: #ffc107;
      transform: translateX(50px) rotate(30deg);
    }

    .box-ease-out {
      transition-timing-function: ease-out;
    }
    .box-ease-out:hover {
      background-color: #6c757d;
      transform: translateX(50px) rotate(30deg);
    }

    .box-ease-in-out {
      transition-timing-function: ease-in-out;
    }
    .box-ease-in-out:hover {
      background-color: #17a2b8;
      transform: translateX(50px) rotate(30deg);
    }

    .box-cubic-bezier {
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Exemplo de curva "saltitante" */
    }
    .box-cubic-bezier:hover {
      background-color: #6f42c1;
      transform: translateX(50px) rotate(30deg);
    }
  </style>
</head>
<body>
  <div class="box box-ease">ease (Padrão)</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-cubic-bezier">cubic-bezier</div>
</body>
</html>

Resultado:

  • Passe o mouse sobre cada caixa para observar como o transition-timing-function afeta a "sensação" da transição.
  • Note a diferença na aceleração e desaceleração de cada caixa. A cubic-bezier pode até criar um efeito de "salto".

Pontos Chave:

  • Curva de Aceleração: Define como a velocidade da transição muda ao longo do tempo.
  • Palavras-chave: ease, linear, ease-in, ease-out, ease-in-out são as mais comuns.
  • cubic-bezier(): Oferece controle total para criar curvas de aceleração personalizadas.
  • Múltiplas Propriedades: Pode-se definir funções de tempo diferentes para cada propriedade listada em transition-property.

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