Gerador de Animações CSS

Crie animações CSS sem código. Escolha presets como fade, slide, bounce ou spin—ajuste velocidade e easing, e copie o código @keyframes pronto pra usar.

Presets de Animação

Duração0.5s

Atraso0s

Easing / Curva

Repetições

Direção

Estado Final

CSS Gerado

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

Prévia

✨

Dica Pro: Use 'forwards' no fill-mode pra manter o estado final. Combine com CSS transitions pra efeitos de movimento mais ricos.

Gerador de Animações CSS & Criador de Keyframes

Crie animações CSS sem escrever código do zero. Escolha entre 14+ presets de animação—fadeIn, fadeOut, slideIn, bounce, pulse, spin, shake, flip e mais. Ajuste duração, easing (aceleração), delay e repetições. Visualize em tempo real e exporte CSS @keyframes limpo pro seu projeto web.

1Quando usar esta ferramenta?

💡Adicionar animações de entrada/saída a elementos web

💡Criar efeitos de atenção pra botões e CTAs

💡Construir spinners e loaders CSS

💡Prototipar micro-interações antes de codar

💡Gerar animações hover pra cards e imagens

2Funcionalidades

14+ presets de animação prontos pra usar (fade, slide, bounce, spin...)
Prévia ao vivo—veja mudanças em tempo real
Controle total: duração, delay, easing, iterações, direção
Saída limpa de @keyframes com shorthand de animation
Copie com um clique ou baixe arquivo .css
Funciona offline—100% processado no cliente, sem upload de dados

3Como usar

Selecione um efeito de animação da biblioteca de presets.
Ajuste duração (velocidade), delay e curva de easing.
Veja a prévia atualizar instantaneamente.
Copie o código CSS ou baixe como arquivo .css.

Perguntas Frequentes

Q. Posso personalizar o código @keyframes?

A. Claro! O CSS gerado é seu pra editar—copia e modifica os keyframes como precisar.

Q. Funciona com React, Vue ou Tailwind?

A. Sim! Gera CSS padrão. Use em qualquer framework, arquivo CSS ou biblioteca CSS-in-JS.

Q. Qual a diferença entre animation e transition?

A. Animações usam @keyframes pra movimentos complexos de vários passos. Transições são mudanças simples de um estado pra outro. Esta ferramenta foca em animações keyframe.