DevToolBoxGRÁTIS
Blog

Gerador de Animacoes CSS

Crie animacoes CSS keyframe visualmente com preview ao vivo.

1s
0s
A
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

Gerador de animacoes CSS gratuito

Crie animacoes CSS com preview em tempo real e exportacao de codigo.

Dicas

  • Use ease-in-out para animacoes fluidas
  • Mantenha animacoes abaixo de 300ms
  • Use transform e opacity para desempenho
  • forwards mantem o estado final
  • Use animation-delay para escalonar

FAQ

O que sao animacoes CSS keyframe?
Permitem definir etapas intermediarias com regras @keyframes.
Quais funcoes de timing?
ease, linear, ease-in, ease-out, ease-in-out e cubic-bezier.
Como repetir?
Defina as iteracoes como "infinite".
O que e fill-mode?
fill-mode determina como os estilos sao aplicados antes e depois da animacao.
E gratuito?
Sim, completamente gratuito.

Ferramentas relacionadas

𝕏 Twitterin LinkedIn

Avalie esta ferramenta

4.8 / 5 · 79 avaliações

Fique atualizado

Receba dicas de dev e novos ferramentas semanalmente.

Sem spam. Cancele a qualquer momento.

Enjoy these free tools?

Buy Me a Coffee