A diferença entre um website amador e uma aplicação digital de alto padrão estético reside nas micro-interações. Sem transições, quando o usuário passa o mouse sobre um botão, as cores e elevações mudam em zero milissegundos — um corte seco, robótico e visualmente agressivo. A propriedade transition ensina o motor do navegador a interpolar matematicamente a passagem suave entre o estado inicial e o estado final de um elemento. Nesta lição, você dominará as 4 subpropriedades de transição, aprenderá por que deve fugir do transition: all e descobrirá como usar curvas cubic-bezier para criar efeitos de mola elástica cinematográficos.

1. A Anatomia da Propriedade transition

Uma transição suave completa é composta por quatro parâmetros fundamentais:

/* Sintaxe Geral: transition: [propriedade] [duração] [curva-de-velocidade] [atraso]; */
.botao {
  transition: transform 0.3s ease 0s;
}

1. transition-property — O que Animar?

Define exatamente quais propriedades de estilo serão interpoladas suavemente.

2. transition-duration — O Tempo de Resposta

O tempo total da transição, expresso em segundos (0.3s) ou milissegundos (300ms).

• Zona Ideal de Micro-interações (150ms a 350ms): É rápida o suficiente para parecer instantânea e suave o bastante para ser percebida pelo cérebro humano.
• Acima de 500ms: O site começa a parecer pesado, lerdo e cansativo para o usuário.

3. transition-timing-function — A Física da Velocidade

Dita a curva de aceleração do movimento, simulando as leis de inércia da física real.

4. transition-delay — O Tempo de Espera

Define quanto tempo o navegador deve aguardar antes de iniciar a transição. Excelente para criar cascatas de itens em listas (staggered animations).

2. A Física das Curvas de Velocidade (Timing Functions)

A forma como um objeto acelera e desacelera comunica peso e personalidade à interface:

3. O Superpoder do cubic-bezier: O Efeito Mola (Spring)

Todas as funções acima são apenas atalhos pré-configurados de uma Curva de Bézier Cúbica composta por 4 coordenadas matemáticas: cubic-bezier(P1x, P1y, P2x, P2y).

A mágica acontece quando usamos um valor no eixo Y maior do que 1: o elemento ultrapassa seu destino final e “rebota” elasticamente de volta, simulando uma mola mecânica sem precisar de bibliotecas pesadas de animação em JavaScript:

/* Curva de Rebote Elástico Snappy / Bouncy */
.card-elastico {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
 
.card-elastico:hover {
  transform: translateY(-10px) scale(1.03); /* Dá um leve "pulo" elástico! */
}

4. Onde Declarar a Transição? A Regra da Ida e da Volta

/* FORMA CORRETA: No estado base */
.botao-perfeito {
  background-color: #2563eb;
  transform: translateY(0);
  /* A transição mora aqui, garantindo suavidade na ida E na volta: */
  transition: transform 0.25s ease-out, background-color 0.2s ease;
}
 
.botao-perfeito:hover {
  background-color: #1d4ed8;
  transform: translateY(-4px);
}

5. Múltiplas Transições Independentes

Você pode atribuir tempos e acelerações diferentes para cada propriedade, separando-as por vírgula em uma única regra:

.cartao-vip {
  /* O movimento dura 300ms com mola; a sombra muda mais rápido em 150ms */
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.15s ease-out,
    border-color 0.2s linear;
}

6. Acessibilidade Vestibular (WCAG 2.2)

Transições com movimento de escala ou translação devem respeitar as preferências de acessibilidade de pessoas com labirintite:

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

7. Laboratório Prático: Comparando Curvas e o Efeito Mola

No código interativo abaixo, experimente passar o cursor do mouse sobre cada um dos 3 botões para sentir visualmente a diferença entre a falta de transição, a transição ease tradicional e o efeito mola com cubic-bezier:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Transições CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    .painel-botoes {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 24px;
    }
 
    .btn-teste {
      background: #1e293b;
      color: #fff;
      border: 1px solid #334155;
      padding: 16px 28px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
    }
 
    /* 1. SEM TRANSIÇÃO (CORTE SECO) */
    .btn-sem-transicao:hover {
      background: #ef4444;
      transform: translateY(-8px);
    }
 
    /* 2. TRANSIÇÃO PADRÃO (EASE) */
    .btn-ease {
      transition: transform 0.25s ease, background 0.25s ease;
    }
 
    .btn-ease:hover {
      background: #3b82f6;
      transform: translateY(-8px);
    }
 
    /* 3. EFEITO MOLA ELÁSTICA (CUBIC-BEZIER) */
    .btn-mola {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
    }
 
    .btn-mola:hover {
      background: #10b981;
      transform: translateY(-8px) scale(1.05);
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">A Física das Transições Suaves no CSS</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Passe o mouse sobre os 3 botões e observe a diferença física de percepção e acabamento de cada um:
  </p>
 
  <div class="painel-botoes">
    <button class="btn-teste btn-sem-transicao">1. Sem Transição (Seco)</button>
    <button class="btn-teste btn-ease">2. Transição ease (Padrão)</button>
    <button class="btn-teste btn-mola">3. Mola cubic-bezier (Snappy)</button>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar as coordenadas da curva cubic-bezier para criar seus próprios efeitos de aceleração física:

⚡ Abrir no Playground IDE →

8. Resumo e Próximos Passos

• transition interpola suavemente a transição numérica entre dois estados disparados por interações.
• Evite transition: all para blindar sua página contra quedas de quadros de layout (Reflows); especifique sempre propriedades como transform e opacity.
• Durações entre 150ms e 350ms são o padrão ouro da ergonomia de interfaces modernas.
• Declare o transition no estado base do elemento para garantir suavidade na entrada e na saída do hover.
• Curvas cubic-bezier com valores de Y maiores que 1 simulam o efeito de rebote elástico (spring) com extrema elegância e performance nativa.