transition: animar mudanças de estado

O problema: as mudanças são bruscas

Quando uma propriedade muda (por exemplo, ao passar o mouse com :hover), por padrão a mudança é instantânea: a cor pula de uma vez, sem avisar. transition faz com que essa mudança ocorra de forma gradual e suave, e a diferença entre um "tlec" seco e uma transição elegante é enorme.

.botao {
  background: #2563eb;
  transition: background 0.3s ease;
}
.botao:hover {
  background: #1e40af;   /* a mudança é animada em 0.3s */
}

Anatomia do transition

A forma curta aceita vários valores nesta ordem:

transition: propriedade duração função-de-tempo atraso;
/* exemplo: */
transition: transform 0.4s ease-in-out 0s;

• propriedade: o que animar (background, transform, opacity...) ou all.
• duração: quanto dura (0.3s, 200ms...). Obrigatória para que apareça.
• função de tempo (easing): o ritmo. ease, linear, ease-in, ease-out, ease-in-out, ou cubic-bezier(...).
• atraso: quanto espera antes de começar (opcional).

Bom uso com :hover

A regra prática: coloque a transition no estado base (não no :hover), assim ela anima tanto ao entrar quanto ao sair.

.cartao {
  transition: transform 0.2s ease-out;
}
.cartao:hover {
  transform: scale(1.05);   /* cresce suavemente ao passar o mouse */
}

⚠️ ARMADILHA CLÁSSICA: animar propriedades caras como width, height ou top obriga o navegador a recalcular o layout a cada quadro, e o efeito vira uma bagunça travada. Anime transform e opacity sempre que puder: são baratas e vão lisas como manteiga.

Exemplos

Uma transição típica como cadeia de texto

const transicao = "transform 0.2s ease-out";
console.log(transicao);