@keyframes: nomear e encadear uma animação
transition (Módulo 8) só sabe animar de um estado A para um estado B, disparado por uma interação. Um selo 'novo' pulsando sozinho, ou um spinner de carregamento girando sem parar, precisam de outra ferramenta.
Estudar esta lição interativa →O Módulo 8 ensinou transition: uma mudança suave entre dois estados (normal e :hover, por exemplo), sempre disparada por alguma interação. Mas alguns efeitos precisam rodar sozinhos, sem nenhum evento, e podem passar por vários pontos intermediários, não só dois: um selo "novo" que pulsa continuamente, um ícone de carregamento girando sem parar. Para isso existe @keyframes: uma animação nomeada, com uma sequência de passos definida por você.
Dentro de @keyframes nome-da-animacao { ... }, cada passo é descrito por uma porcentagem (0%, 50%, 100%) ou pelos atalhos from (equivalente a 0%) e to (equivalente a 100%). O navegador interpola suavemente entre um passo e o próximo, exatamente como a transition interpola entre dois estados, só que aqui você pode encadear quantos passos quiser.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. @keyframes pulsar define três passos (0%, 50%, 100%); animation aplica essa sequência ao elemento, repetindo para sempre com infinite.
Um exemplo de produto real: o selo "novo" de um catálogo de produtos que pulsa sutilmente para chamar atenção, ou o ícone giratório de "carregando..." de qualquer app, são os dois usos mais comuns de @keyframes na web. Nenhum dos dois espera um clique ou um hover: eles simplesmente tocam, de forma independente da interação do usuário.
Esquecer animation-iteration-count: infinite; faz a animação tocar uma única vez (o padrão é 1) e, ao terminar, o elemento volta ao estilo que tinha antes, a menos que você peça para ele ficar no último quadro com animation-fill-mode: forwards. Isso parece "quebrado" quando o efeito deveria se repetir. E, assim como no Módulo 8 com transition, esquecer animation-duration (o padrão é 0s) faz a animação "rodar" instantaneamente, sem nenhum movimento visível, como se nada tivesse acontecido.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete @keyframes girar e aplique com animation.