Gerador de Animacoes CSS

@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

Ferramentas relacionadas