Transições CSS

A sombra da caixa deu profundidade calma. As transições dão mudança calma no tempo: um botão suaviza o fundo no hover, um cartão sobe um pouco no foco, a cor de um link desliza em vez de saltar. Você ainda escreve dois estados — o navegador interpola entre eles pela duração que definir.

O que é uma transição

Uma transição não inventa um visual novo sozinha. Ela observa uma propriedade que já muda (muitas vezes via :hover, :focus-visible ou uma classe) e anima essa mudança. Sem transição o salto é instantâneo; com uma, você ganha um deslize curto e legível.

As quatro longhands são transition-property, transition-duration, transition-timing-function e transition-delay. No dia a dia, o atalho transition costuma bastar.

Propriedade e duração

Nomeie o que pode animar e quanto a mudança deve durar. Durações são tempos (0.2s, 200ms). Curto e com propósito vence esperas teatrais — o feedback de UI muitas vezes vive em torno de 150ms–300ms.

Coloque a transição na regra base para entrada e saída do hover animarem. Liste só as propriedades que importa — senão saltos acidentais de layout deslizam por meio segundo.

Timing e atraso

transition-timing-function molda a curva de velocidade: ease (sensação padrão), linear, ease-in, ease-out, ease-in-out ou um cubic-bezier(...) próprio. transition-delay espera antes de começar — útil em menus escalonados, fácil exagerar num único botão.

Ease-out costuma parecer natural ao aparecer UI. Linear combina com progresso que deve ler-se constante. Reserve o atraso para sequências intencionais — não para cada clique parecer tarde.

Atalho e movimento multipropriedade

A ordem típica no atalho é: propriedade, duração, timing-function, atraso. Várias transições separadas por vírgulas. Prefira propriedades amigáveis à pintura — transform e opacity costumam ser mais suaves do que animar width, height, top ou margin.

Aqui a profundidade da lição anterior encontra o movimento: sombra e elevação partilham um momento de hover. Mantenha o percurso pequeno para a página continuar sólida.

Reduced motion e quando usar animações

Algumas pessoas preferem menos movimento. Respeite prefers-reduced-motion: reduce encurtando ou desativando transições não essenciais. Transições brilham em mudanças de estado A → B. Loops ou histórias em vários passos pertencem às animações CSS (@keyframes) mais adiante — depois de Transforms.

Experimente você

1. Adicione uma transição de fundo 0.2s a um botão e faça hover — depois mova transition de :hover para a regra base e compare ao sair do hover.
2. Anime opacity com ease-out ao alternar uma classe de painel; experimente linear e note a sensação.
3. Combine transform: translateY(...) com box-shadow mais suave no hover de um cartão (duas propriedades, uma lista de atalho).
4. No DevTools, emule prefers-reduced-motion: reduce e confirme que o movimento não essencial recua.
5. Neste exercício evite animar height para um menu aberto — deixe esse padrão para depois.

Erros comuns

• Escrever transition: all 1s para que toda propriedade, inclusive layout, deslize por um segundo inteiro
• Durações de vários segundos que deixam a UI lenta
• Animar width / top / margin quando transform ou opacity bastam
• Ignorar prefers-reduced-motion
• Esperar que uma transição faça loop eterno — isso é território de animação

Resumo

• Transições suavizam mudanças de propriedade entre estados ao longo de uma duração
• Controle propriedade, duração, timing-function e atraso (ou use o atalho transition)
• Prefira movimento curto em propriedades amigáveis à pintura; coloque a transição na regra base
• Honre reduced-motion; use animações keyframe para loops e sequências complexas
• Seguinte em Effects & Motion: Transforms