O que é Gerador de animações CSS?

Este gerador visual de animações CSS permite criar animações complexas com keyframes sem escrever código manualmente. Defina keyframes, ajuste funções de temporização, configure duração e atrasos — depois copie o código CSS gerado diretamente para o seu projeto. Perfeito para botões, loaders, efeitos de hover e transições de página.

Como usar

1. Escolha um preset de animação (fade, slide, bounce, rotate) ou comece do zero adicionando keyframes na linha do tempo.
2. Ajuste as propriedades em cada keyframe — transform, opacidade, cor, escala — e refine a curva de easing, duração e número de repetições.
3. Visualize a animação em tempo real, depois copie o código CSS @keyframes gerado ou baixe-o como arquivo .css.

Resultado

Um desenvolvedor frontend precisa de uma animação suave de entrada para cards em uma página de portfólio. Ele configura uma animação ease-out de 0,6s que aparece gradualmente subindo 20px, copia o CSS e aplica com atraso escalonado por card.

Ferramentas relacionadas