Transitions

No Laboratório Belavista, o botão “Ver workshop” muda de cor ao receber foco ou hover. Transition interpola entre dois estados; não inventa um roteiro sozinho.

O exemplo está em pacote de exemplos/52-transitions/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Declarar o que anima com transition-property.
• Controlar tempo, atraso e curva (ease, linear, etc.).
• Usar o atalho transition.
• Preferir propriedades baratas e respeitar redução de movimento.

Estado A → estado B

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Transitions — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <main>
      <a class="cta" href="workshop.html">Ver workshop</a>
      <button type="button" class="chip">Papel kraft</button>
    </main>
  </body>
</html>

.cta {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: #1a3a4a;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25rem;
  transition-property: background-color, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}
.cta:hover,
.cta:focus-visible {
  background-color: #c45c26;
  transform: translateY(-2px);
  outline: 3px solid #1a3a4a;
  outline-offset: 3px;
}
.chip {
  margin-inline-start: 1rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid #1a3a4a;
  background: #fff;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.chip:hover,
.chip:focus-visible {
  border-color: #c45c26;
  background-color: #faf6f1;
}
@media (prefers-reduced-motion: reduce) {
  .cta,
  .chip {
    transition: none;
  }
}

Mude uma coisa. Troque 200ms por 1s. Preveja mudança lenta. Recarregue, passe o mouse. Confira. Depois volte a ~200ms.

Propriedades

• transition-property — lista ou all (use all com parcimônia).
• transition-duration — s ou ms; padrão 0s = instantâneo.
• transition-timing-function — ritmo da interpolação.
• transition-delay — espera antes de começar.

Atalho: transition: background-color 200ms ease-out;

Transition vs animation

Transition precisa de um gatilho (classe, :hover, :focus-visible). Animation com keyframes pode rodar sozinha. Para menus e botões, transition costuma bastar.

Erro comum: animar height: auto — muitos navegadores não interpolam bem. Prefira transform e opacity, ou técnicas explícitas de grid/max-height com cuidado.

Arquivo no disco. workshop.html pode ser um stub local. Teste em 127.0.0.1.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Sem transition-duration (ou com 0s), o que o usuário vê?
2. Por que listar background-color e transform em vez de só all?
3. Transition substitui @keyframes para um loop infinito de pulso?

Respostas comentadas

1. A mudança de estado é instantânea.
2. Só o necessário anima; outras propriedades (como outline) podem mudar sem atraso indesejado.
3. Não. Loop contínuo sem gatilho é papel de animation + @keyframes.