Gerador de Animação CSS com presets e editor visual
O Gerador de Animação CSS permite criar animações com @keyframes de forma visual, sem precisar escrevê-las à mão. Escolha um preset pronto, ajuste o tempo e o easing e copie um CSS limpo e pronto para produção direto para a sua folha de estilos.
Ele foi feito para desenvolvedores front-end e designers de UI que querem movimento caprichado em pouco tempo: prototipar um efeito de entrada, experimentar curvas de easing ou ajustar um spinner em loop. Você pode escolher entre 35 presets em quatro categorias, ajustar todas as propriedades da animação e abrir o Editor de keyframes para moldar cada passo você mesmo. Uma prévia ao vivo reproduz a sua animação enquanto você trabalha.
Como criar uma animação CSS
Escolha um preset
Selecione uma aba de categoria — Entrada, Saída, Ênfase ou Loop — e clique em qualquer preset para aplicá-lo. A prévia roda na hora e cada propriedade e keyframe se atualiza para combinar.
Ajuste as propriedades
Refine Duração (0,1s a 5s), Atraso (0s a 5s), Easing, Iteração (1, 2, 3 ou infinite), Direção (normal, reverse, alternate) e Modo de preenchimento (none, forwards, backwards, both).
Edite os keyframes (opcional)
Abra o Editor de keyframes para moldar cada passo. Defina opacity, translateX, translateY, rotate e scale em cada porcentagem e clique em Adicionar keyframe para inserir um novo passo com valores interpolados.
Veja a prévia e copie
Use reproduzir, pausar e reiniciar para revisar o movimento e troque a forma da prévia (caixa, círculo, texto) e a cor de fundo para testá-la em contexto. Quando estiver do jeito certo, clique em Copiar para pegar o CSS completo.
Recursos
35 presets de animação
Uma biblioteca de 35 presets em quatro categorias: Entrada, Saída, Ênfase e Loop, cada um com tempos padrão bem escolhidos.
Controle total das propriedades
Defina duração, atraso, easing, número de iterações, direção e modo de preenchimento em um só painel de controles visuais.
9 opções de easing
Use as curvas padrão mais easing personalizado bounce, elastic, suave e em steps para efeitos quadro a quadro.
Editor visual de keyframes
Uma linha do tempo mostra cada keyframe; clique em qualquer passo para editar opacity, translateX/Y, rotate e scale, e depois adicione ou remova passos.
Interpolação inteligente
Novos keyframes são preenchidos automaticamente a partir dos passos vizinhos, então os quadros inseridos ficam suaves em vez de saltar.
Prévia ao vivo
Veja a animação rodar em tempo real com controles de reproduzir, pausar e reiniciar conforme você muda qualquer configuração.
Opções de forma e fundo
Veja a prévia em uma caixa, círculo ou texto e defina uma cor de fundo personalizada para testar o movimento em contextos diferentes.
Código limpo de saída
Receba o bloco @keyframes completo mais a forma abreviada animation, atualizado ao vivo, com cópia em um clique para a área de transferência.
Modo escuro
Um tema escuro integrado mantém o editor confortável de usar em ambientes com pouca luz.
Roda no seu navegador
Todo o processamento é feito no cliente, então suas animações ficam no seu dispositivo, sem nada enviado a um servidor.
Perguntas frequentes
Como faço para criar uma animação CSS?
Escolha um preset de uma categoria, ajuste a duração, o easing e as demais propriedades e, se quiser, abra o Editor de keyframes para refinar cada passo. Quando a prévia ao vivo estiver do jeito certo, clique em Copiar para pegar o CSS completo. Não há nada para instalar nem cadastro.
O que são keyframes e @keyframes no CSS?
Uma regra @keyframes define os estágios nomeados de uma animação, com cada keyframe definido em uma porcentagem de 0% a 100%. O navegador interpola entre esses estágios ao longo da duração da animação. Este gerador cria a regra @keyframes para você e a aplica por meio da forma abreviada animation.
Quais propriedades CSS posso animar?
O Editor de keyframes controla opacity, translateX, translateY, rotate e scale — propriedades aceleradas por GPU na maioria dos navegadores para um movimento suave. Alguns presets também usam transformações mais ricas, como scaleX, scaleY, skewX, skewY e rotateX, que aparecem no código gerado.
Para que serve o modo de preenchimento (fill mode)?
O modo de preenchimento controla a aparência do elemento antes e depois da animação. none o retorna aos estilos originais, forwards mantém os estilos do último keyframe, backwards aplica o primeiro keyframe durante o atraso e both combina os dois. Para animações de entrada, forwards costuma manter o elemento visível depois que ele aparece.
Qual função de easing devo usar?
Use ease-out em entradas (início rápido, parada suave), ease-in em saídas (início suave, fim rápido) e ease-in-out em ênfase e loops. Escolha linear para spinners contínuos e recorra a bounce ou elastic quando quiser um clima brincalhão e que chame a atenção.
Como faço uma animação em loop (infinite)?
Defina a Iteração como infinite. Os presets de Loop — como Spin, Float e Wave — já usam iterações infinitas, então continuam rodando sozinhos. Combinar infinite com a direção alternate cria um movimento suave de vai e volta.
Qual é a diferença entre animação e transição no CSS?
Uma transição anima uma única mudança entre dois estados e precisa de um gatilho, como um hover ou a troca de uma classe. Uma animação com keyframes pode definir vários estágios intermediários, rodar em loop e começar sozinha. Esta ferramenta foca em animações com @keyframes, que dão controle mais fino sobre o movimento em várias etapas.
Como copio o CSS gerado?
Clique no botão Copiar no painel de código. Ele copia toda a saída — o bloco @keyframes mais uma regra .element com a forma abreviada animation — para a área de transferência, pronta para colar na sua folha de estilos. A saída usa propriedades padrão suportadas em todos os navegadores modernos, sem necessidade de prefixos de fornecedor.
Ainda não há comentários. Seja o primeiro a comentar!