Como usar: Gerador de Keyframes CSS
- Escolha um preset — passe o mouse sobre os blocos para pré-visualizar — ou comece com um keyframe em branco.
- Defina duração, atraso, iterações, easing e o gatilho (carregamento, hover, clique, rolagem).
- Edite os keyframes na linha do tempo: clique para adicionar um, arraste para mover e depois ajuste as propriedades com os controles deslizantes.
- Navegue, desacelere ou ative o onion skin para ajustar os detalhes, depois copie o CSS, o Tailwind ou o HTML.
Como funcionam os @keyframes
Uma regra @keyframes lista os estilos que um elemento deve ter em pontos da animação, escritos em porcentagens (from equivale a 0%, to equivale a 100%). O navegador interpola tudo o que existe entre eles. Keyframes com estilos idênticos podem compartilhar um seletor, como 0%, 100% { … }, e cada keyframe pode definir sua própria animation-timing-function para o trecho que vem depois dele.
O que você pode criar
- Linha do tempo de keyframes — adicione quantos keyframes quiser, arraste-os para novas porcentagens e defina uma easing para cada um.
- Propriedades — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacidade, 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, ao passar o mouse, ao clicar, ao entrar na tela ou uma animação dirigida pela rolagem, somente em CSS.
- Stagger — anime uma lista item por item com uma única propriedade customizada CSS.
- Inspeção — pause, navegue quadro a quadro, desacelere para ¼ da velocidade e ative o onion skin para ver todos os keyframes de uma vez.
- Exportação — shorthand ou longhand em CSS, HTML, JavaScript, Tailwind v3 e v4, um mixin SCSS, um arquivo de demo independente ou um link de compartilhamento.
O shorthand de 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 serão executados |
| direção | alternate | Toca ao contrário 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. Com Respeitar prefers-reduced-motion ativado, o CSS desliga a animação para visitantes que ativaram “reduzir movimento” no sistema operacional. Evite piscadas mais de três vezes por segundo e mantenha as animações em loop discretas, ou ofereça um jeito de pausá-las.
Dicas de performance
Anime transform e opacity em vez de top, left, width ou margin, que forçam o recálculo de layout em cada quadro. Use will-change apenas em elementos que estão prestes a animar. Ajuste sua easing com o gerador de cubic-bezier, adicione um spinner pelo gerador de loaders CSS e combine animações com sombras ou gradientes.
Também pesquisado como: keyframes css, gerador de @keyframes, editor de keyframes css, animação keyframe css, editor de timeline css.
Ferramentas que combinam com: Gerador de Keyframes CSS
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
- 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 é gratuito para usar?
Posso editar uma animação que já tenho?
Como iniciar a animação quando o elemento entra na tela?
animation-timeline: view() sem JavaScript, em navegadores que suportam o recurso.Funciona com Tailwind CSS?
tailwind.config.js para a v3 e um bloco @theme para a v4, para que você possa usar 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.