Transições: Mudando de Estado com Suavidade

Sem transição, um botão muda de cor instantaneamente quando o mouse entra - e o cérebro percebe isso como "duro", "abrupto". Com transição, a mudança acontece ao longo de 200ms e o botão parece físico. Esse é o segredo de UIs que parecem "polidas".

transition: a forma mais simples

.botao {
  background: #1a73e8;
  color: white;
  transition: background 0.2s ease;
}

.botao:hover {
  background: #1557b0;
}

A regra diz: "quando o background mudar (neste caso, por causa do :hover), interpole ao longo de 200 milissegundos com curva ease". O efeito é suave, sem JavaScript, sem bibliotecas.

Shorthand da transition

transition: <propriedade> <duração> <curva> <delay>;

Você pode animar várias propriedades de uma vez, separando por vírgula:

.cartao {
  background: white;
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cartao:hover {
  background: #f7f7f7;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

As quatro partes

1. Propriedade: qual propriedade animar. Você pode:

• Listar uma ou mais: background, color, transform
• Usar all (anima qualquer propriedade que mude - perigoso, pode animar coisas que você não quer)
• Usar none (sem transição)

Para performance, limite a propriedades que o navegador anima "barato": opacity, transform, filter, e cores. Animar width, height, top/left ou margin força o navegador a recalcular layout - é mais caro.

2. Duração: quanto tempo. Padrão é 0s (instantâneo - sem transição). Valores comuns:

• 100ms - 150ms - quase imperceptível, mas tira a "dureza"
• 200ms - 300ms - padrão da maioria dos sites
• 400ms - 600ms - dramático, "cinematográfico", use com cuidado

Mais que 500ms geralmente atrasa o usuário - a UI fica parecendo lenta. Regra prática: se o usuário não percebeu a transição, ela está no tempo certo. Se ele percebeu e achou lento, está longa demais.

3. Curva de animação (timing-function): como a velocidade muda durante a transição. Sem unidades, é uma palavra-chave:

• ease (default): começa devagar, acelera, termina devagar. Suave.
• linear: velocidade constante. Mecânico, raramente o ideal.
• ease-in: começa devagar, termina rápido. Bom para "saída" - coisa que some.
• ease-out: começa rápido, termina devagar. Padrão da maioria dos UIs - coisas que aparecem devem chegar "parando".
• ease-in-out: como ease, mas simétrico. Bom para loops.
• cubic-bezier(n, n, n, n): controle total. Use sites como cubic-bezier.com para criar curvas customizadas.

.botao { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
/* curva clássica do Material Design */

4. Delay: quanto tempo esperar antes de começar. Raro, mas útil para "efeito cascata" (um item aparece, depois o próximo).

.lista li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.lista li:nth-child(1) { transition-delay: 0s; }
.lista li:nth-child(2) { transition-delay: 0.1s; }
.lista li:nth-child(3) { transition-delay: 0.2s; }

Propriedades que não animam

• display - não tem meio-termo (none → block é instantâneo). Truque: troque display junto com opacity/transform, ou use @starting-style (novo, mas com menos suporte).
• font-family - trocar de fonte é binário.
• background-image (url()) - não interpola. Você pode usar gradientes para "imitar" crossfades.
• width: auto → valor - não interpola bem. Use width: 0 → valor fixo.

prefers-reduced-motion: acessibilidade

.card {
  transition: transform 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

Usuários com sensibilidade a movimento configuram essa preferência no sistema. Sempre respeite - uma transição bonita pra você pode ser desconfortável (até nauseante) pra quem tem vestibular ou enxaqueca. Veremos isso em detalhe no nível avançado.

• transition: prop dur curva delay - uma ou mais, separadas por vírgula.
• 200-300ms é o padrão da maioria das UIs.
• ease-out para "coisa aparecendo", ease-in para "sumindo".
• Anima opacity e transform de preferência (mais barato).
• Respeite prefers-reduced-motion.

Dica: existe uma transição que parece "mágica" - transform com scale(1.02) no hover. O botão "cresce" um pouquinho, dando sensação de que está vindo pra frente. Combina com box-shadow crescendo e forma o "lift effect" que todo site moderno usa. Tente.

No próximo nó, vamos falar de responsividade - o que fazer quando o mesmo site precisa funcionar em tela de 320px e em monitor de 1920px.