Gerador de Animações CSS
Crie animações CSS com 16 presets. Personalize duração, timing e obtenha código pronto.
Propriedades de Animação
Código CSS
Gerador de Animações CSS
Gere animações CSS instantaneamente com nosso construtor visual. 16 presets incluídos.
Ferramentas populares
Sobre Gerador de Animações CSS
Dezesseis efeitos de keyframes prontos, entre eles bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash e zoom, são ajustados aqui com controles deslizantes e menus de duração, atraso, número de repetições, direção, função de tempo e modo de preenchimento. Um quadrado de prévia repete o resultado conforme você muda cada valor. O painel de saída entrega a regra @keyframes completa mais o atalho animation com o nome de animação que você escolher, pronto para colar em uma folha de estilo.
Casos de uso
Como usar
Escolha um efeito na grade de predefinições no topo: Bounce, Shake, Pulse, Fade In, Slide In Left, Rotate, Flip, Swing, Jello, Heart Beat, Zoom In e outros.
Veja o quadrado roxo do painel de pré-visualização repetir o efeito e arraste os controles Duration e Delay para definir os tempos em segundos.
Escolha um Iteration Count de 1, 2, 3, 5 ou Infinite e um Direction entre Normal, Reverse, Alternate e Alternate Reverse.
Defina a Timing Function - Ease, Ease In, Ease Out, Ease In Out, Linear, Step Start ou Step End - e um Fill Mode entre None, Forwards, Backwards e Both.
Renomeie os keyframes no campo Animation Name para que a regra não entre em conflito com o CSS que já existe no seu site.
Use o atalho de uma linha exibido acima do painel de código ou clique em Copy para levar o bloco @keyframes completo junto com a regra .animated-element.
Dicas Pro
- Cole seu conteúdo direto — o Gerador de Animações CSS reconhece os formatos de entrada mais comuns e aplica configurações padrão adequadas automaticamente.
- Use os atalhos de teclado (Ctrl/Cmd+A para selecionar tudo, Ctrl/Cmd+C para copiar) e agilize seu trabalho no Gerador de Animações CSS.
- Se a entrada for muito grande, divida em partes menores — a maioria das abas do navegador aguenta megabytes de texto, mas processar conteúdos enormes pode travar a interface por alguns instantes.
- O Gerador de Animações CSS não registra nem armazena o que você digita. Se precisar de histórico, copie os resultados importantes para um arquivo local ou um app de anotações.
- Combine o Gerador de Animações CSS com outras ferramentas do site (formatadores, conversores, codificadores) e monte fluxos de dados completos sem sair do navegador.
Perguntas frequentes
Sim, totalmente gratuito: sem cadastro, sem chave de API, sem marca d'água e sem limite de uso.
Não. O Gerador de Animações CSS funciona inteiramente no seu navegador, do lado do cliente. O que você digita nunca passa pelos nossos servidores.
Não existe um limite rígido, mas espere alguma lentidão em entradas maiores que alguns megabytes, dependendo da memória do seu dispositivo.
Sim. Os resultados gerados com o Gerador de Animações CSS são seus e podem ser usados livremente em qualquer projeto pessoal ou comercial.
A maior parte da lógica roda em JavaScript no navegador, então, depois do carregamento inicial, quase sempre dá para continuar trabalhando sem conexão de rede.
Nenhum. Como o Gerador de Animações CSS roda no seu navegador, você pode processar quantas entradas o seu hardware aguentar, sem chaves de API nem limitação de velocidade.