Gerador de Animacoes CSS

Crie animacoes CSS keyframe visualmente com preview ao vivo.

Presets

Duracao (s)

Funcao de timing

Atraso (s)

Iteracoes

Direcao

Modo de preenchimento

Preview ao vivo

Saida 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

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

CSS Gradient Generator Color Palette Generator CSS Grid Generator Box Shadow Generator

𝕏 Twitter in LinkedIn

💬 User Feedback

How to Use

Choose an animation type or customize keyframes
Adjust timing, duration, and easing
Preview the animation in real-time
Copy the generated CSS code

Common Use Cases

Creating hover effects
Building loading animations
Adding entrance/exit animations
Prototyping UI interactions

Frequently Asked Questions

What animation types are available?

Fade, slide, bounce, rotate, scale, flip, pulse, shake, and custom keyframe animations.

Can I customize the timing?

Yes. Adjust duration, delay, iteration count, direction, fill mode, and timing function (easing).

Will it work in all browsers?

Generated CSS includes vendor prefixes for maximum browser compatibility.