Animações SVG com CSS keyframes

Keyframes descrevem os estados de uma animação. O navegador calcula as posições intermediárias. No Motion Lab, cada estado contém valores explícitos de deslocamento, rotação, escala e opacidade.

Do início ao fim

@keyframes aparecer {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.alvo { animation: aparecer 1200ms ease-out 0ms 1 normal both; }

A declaração define, nesta ordem, nome, duração, curva, atraso, repetições, direção e preenchimento. O preenchimento both mantém o primeiro estado durante o atraso e o último após uma animação finita.

Use o pacote exportado

Descompacte o ZIP. O index.html contém o SVG inline e referencia animation.css. Copie esse SVG para a sua página e inclua o CSS. O arquivo animation.svg é uma cópia de apoio: usá-lo com img não conecta seus elementos às regras da página.

Preserve os grupos e identificadores

O exportador cria um grupo em volta de cada alvo. Os IDs e nomes de keyframes recebem um prefixo exclusivo. Mantenha os grupos, seus estilos de origem e os identificadores ao integrar. Gere pacotes separados para múltiplas cópias CSS na mesma página.

Movimento reduzido

O pacote inclui uma media query prefers-reduced-motion. Quando a pessoa pede menos movimento, as animações são desativadas e a ilustração original permanece visível.

Teste antes de publicar

npx serve .

Execute o comando na pasta descompactada e abra o endereço informado. Confira o começo, o meio e o fim da animação e também a preferência de movimento reduzido do sistema.