Como usar: Gerador de Animação CSS
- Escolha um preset — passe o mouse sobre os blocos para visualizar — ou comece com um keyframe em branco.
- Defina a duração, o atraso, as repetições, o easing e o gatilho (carregamento, hover, clique, scroll).
- Edite os keyframes na linha do tempo: clique para adicionar um, arraste para mover e ajuste as propriedades com os controles deslizantes.
- Navegue, desacelere ou ative a casca de cebola para ajustar os detalhes e então copie o CSS, Tailwind ou HTML.
O que você pode criar
- Linha do tempo de keyframes — adicione quantos keyframes quiser, arraste-os para novas porcentagens e defina um easing próprio para cada um.
- Propriedades — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, brilho (box-shadow), cor de fundo e border radius. Valores ausentes são interpolados, então as transformações nunca dão saltos.
- Gatilhos — ao carregar a página, no hover, no clique, quando o elemento entra na tela ou uma animação dirigida pelo scroll somente em CSS.
- Stagger — anime uma lista item por item com uma única propriedade customizada do CSS.
- Inspeção — pause, navegue quadro a quadro, reduza para ¼ da velocidade e ative a casca de cebola para ver todos os keyframes de uma vez.
- Exportação — atalho ou formato longhand de CSS, HTML, JavaScript, Tailwind v3 e v4, um mixin SCSS, um arquivo de demonstração independente ou um link para compartilhar.
O atalho animation
| Parte | Exemplo | Significado |
|---|---|---|
| nome | fade-in-up | A regra @keyframes a ser executada |
| duração | 0.6s | Duração de um ciclo |
| função de temporização | cubic-bezier(.33,1,.68,1) | Curva de velocidade entre os keyframes |
| atraso | 0.2s | Espera antes de começar; valores negativos começam no meio da animação |
| número de iterações | infinite | Quantos ciclos |
| direção | alternate | Toca de trás para frente a cada ciclo alternado |
| modo de preenchimento | both | Mantém o primeiro quadro antes e o último depois da execução |
Acessibilidade
Algumas pessoas sentem tontura ou enjoo com movimento na tela. Com Respeitar prefers-reduced-motion ativado, o CSS desliga a animação para visitantes que ativaram “reduzir movimento” no sistema operacional. Evite piscar mais de três vezes por segundo e mantenha animações em loop sutis ou ofereça uma forma de pausá-las.
Dicas de performance
Anime transform e opacity em vez de top, left, width ou margin, que forçam o recálculo do layout a cada quadro. Use will-change apenas em elementos que vão animar em breve. Ajuste o seu easing com o gerador de cubic-bezier, adicione um spinner pelo gerador de loader CSS e combine animações com sombras ou gradientes.
Também pesquisado como: animação css, animação com keyframes, criar animação css, animate css, animação css online, gerador de código de animação, efeitos css.
Ferramentas que combinam com: Gerador de Animação CSS
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
- Gerador de Animação Hover CSS — Crie animações hover para botões, cards, links e ícones.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- Conversor PX para REM — Converta entre pixels, rem e em usando o tamanho de fonte raiz do seu projeto — ou cole uma folha de estilo inteira e converta todos os valores px de uma vez.
Perguntas frequentes
O CSS gerado é grátis para usar?
Sim. Cada preset foi escrito para esta ferramenta e o resultado é CSS puro, sem biblioteca, licença ou necessidade de atribuição.
Posso editar uma animação que já tenho?
Sim. Abra Importar @keyframes existente, cole seu CSS e ele será convertido em keyframes editáveis. São suportados opacity, transformações (translate, rotate, rotateX/Y, scale, skew), blur, cor de fundo, border radius e sombras de brilho.
Como iniciar a animação quando o elemento entra na tela ao rolar?
Escolha o gatilho Quando entrar na tela ao rolar para um pequeno script com IntersectionObserver que funciona em qualquer navegador, ou Dirigida pelo scroll (somente CSS) para
animation-timeline: view(), sem JavaScript, nos navegadores que suportam o recurso.Funciona com Tailwind CSS?
Sim. As abas do Tailwind geram um bloco
tailwind.config.js para a v3 e um bloco @theme para a v4, para que você use a animação como uma classe animate-*.Quais propriedades são melhores para animações suaves?
transform e opacity rodam no compositor da GPU e continuam suaves até em celulares lentos. Blur, sombras, cores e border radius custam mais, então use-os com moderação em elementos grandes.Posso instalar o Gerador de Animação CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Animação CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.