animation vs transition: qual usar quando
Depois de conhecer os dois recursos, a dúvida natural é: para este efeito específico, uso transition ou @keyframes + animation?
Estudar esta lição interativa →A pergunta certa não é "qual é melhor", é "este efeito precisa de um evento disparando ele, ou ele roda sozinho?" e "são só dois pontos (antes/depois), ou vários passos?".
Use transition quando...
O efeito reage a uma interação (:hover, :focus, uma classe alternada por JavaScript) e tem só dois pontos: o estado normal e o estado de destino.
Use animation + @keyframes quando...
O efeito roda por conta própria (sem esperar clique ou hover), se repete, ou precisa de mais de dois pontos intermediários no meio do caminho.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O botão à esquerda usa transition (só reage ao hover); o selo à direita usa animation (pulsa sozinho, sem nenhuma interação).
Um exemplo real que junta os dois no mesmo componente: um botão de "favoritar" que escurece suavemente no :hover (isso é transition, reage a um evento, dois estados) e que, ao ser clicado, ganha um pequeno selo de notificação que pulsa continuamente até ser visto (isso é animation, roda sozinho, sem esperar outro evento). Nada impede os dois recursos convivendo lado a lado no mesmo projeto, ou até no mesmo elemento.
Um efeito de "quicar" (bounce), onde o elemento sobe, desce um pouco mais que o ponto inicial, e só depois se estabiliza, tem mais de dois pontos no meio do caminho. A transition só conhece "de onde saiu" e "para onde foi", e uma curva de easing como cubic-bezier(.34, 1.56, .64, 1) até consegue imitar uma pequena ultrapassagem. Mas descrever cada passo da trajetória, um a um, com o controle que você tem sobre cada etapa, é o trabalho de @keyframes. Qualquer efeito com uma trajetória de vários passos que você precisa controlar pede @keyframes.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete transition no botão e animation no selo.