O que é Gerador de animações CSS?

Crie animacoes CSS com keyframes de forma visual, sem escrever codigo manualmente. Configure keyframes, escolha funcoes de temporizacao, ajuste duracao e atrasos, e copie o CSS direto para o seu projeto. Funciona bem para botoes, loaders, efeitos de hover e transicoes de pagina.

Escolha entre uma biblioteca de mais de quarenta animações prontas, agrupadas em Esmaecer, Deslizar, Zoom, Girar, Quique, Atenção, Saída e Carregadores, ou monte as suas do zero. Cada keyframe controla opacidade, escala, rotação, translate X e Y, inclinação X e Y, desfoque, raio da borda, sombra e cor de fundo. Já tem um bloco @keyframes? Cole-o no diálogo de importação e o editor visual reconstrói cada passo. Pause a pré-visualização e arraste o cursor vermelho para inspecionar qualquer fotograma intermédio; a saída é CSS @keyframes puro, pronto para colar em qualquer folha de estilo.

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.

Quando usar

• Adicionar animações de entrada a hero sections, modais ou cards quando a página carrega.
• Desenhar microinterações para botões, como um leve aumento no hover ou um shake quando o formulário falha.
• Prototipar spinners de loading e skeletons antes de plugá-los no framework.

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.

Perguntas frequentes

Qual a diferença entre animations e transitions no CSS?

Transitions vão do estado A para o B uma vez, disparadas por hover, focus ou mudança de classe. Animations seguem uma regra @keyframes com quantos passos intermediários você quiser, podem entrar em loop e arrancam no carregamento da página sem interação do usuário.

Por que minha animação roda uma vez e depois some?

O elemento volta aos estilos base quando a animação termina. Defina animation-fill-mode como forwards para os valores do último keyframe ficarem, ou como both se você também precisar do primeiro keyframe aplicado durante qualquer delay.

Qual easing escolher para parecer natural?

Para entradas, ease-out desacelera no fim e o movimento fica calmo. Para saídas, ease-in faz o contrário. cubic-bezier(0.34, 1.56, 0.64, 1) dá um leve quique que soa divertido sem exagero.

Essas animações funcionam em navegadores antigos?

@keyframes tem suporte em todos os navegadores lançados depois de 2013, sem prefixo de fornecedor. Se você precisa atender IE 10 ou anterior, precisará do prefixo -webkit-, mas esse uso é hoje bem abaixo do limite que justifica CSS extra.

Como faço a animação rodar para sempre?

Defina iteration-count como infinite e combine com direction: alternate; assim cada ciclo é invertido e você tem um vai-e-vem suave (ótimo para pulse e shake) em vez de um salto duro de volta ao início.

Ferramentas relacionadas