Gerador de animação CSS @keyframes com pré-visualização

Gere uma animação CSS @keyframes (fade, slide, bounce...) com pré-visualização e código.

Durations

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 100 % no cliente — nenhum dado enviado

Crie animações CSS @keyframes e copie código pronto para uso com uma pré-visualização ao vivo. Ajuste etapas, duração e timing sem escrever nada manualmente. A ferramenta roda inteiramente no seu navegador, sem enviar dados para lugar nenhum.

What is it for?

▸ Prototipar uma animação de botão ou ícone
▸ Gerar código @keyframes sem memorizá-lo
▸ Pré-visualizar uma animação antes de integrá-la
▸ Ajustar duração e easing em tempo real

FAQ

Posso copiar o CSS gerado?

Sim, o código @keyframes completo está pronto para colar.

A pré-visualização é ao vivo?

Sim, cada alteração atualiza a animação instantaneamente.

Posso escolher a timing function?

Sim, defina duração, easing e repetições.