Gerador Animação CSS Grátis: Criar Animações Visual Online
14 usosDicas Animação CSS
Presets
Bounce, fade, slide, rotate, pulse e mais. Personalize.
Duração e timing
Ajuste duração, delay, iterações e timing function.
CSS completo
@keyframes e animation gerados. Copie e use.
Perguntas Frequentes
Como criar animação CSS?
Escolha preset ou configure manualmente. Preview ao vivo.
O que é timing function?
Controla velocidade: linear, ease, ease-in, ease-out, ease-in-out.
Gera @keyframes?
Sim, regra @keyframes e propriedade animation.
Posso ajustar a duração da animação sem recriá-la?
Você com certeza pode. Basta encontrar o controle deslizante 'Duração' no gerador. Arrastá-lo para a esquerda diminui o tempo, tornando a animação mais rápida. Arrastá-lo para a direita aumenta. Você verá a prévia ao vivo ser atualizada instantaneamente, mostrando exatamente como uma animação de 1.5 segundos fica em comparação com uma de 0.5 segundos. Isso permite que você ajuste o tempo em tempo real.
O gerador funciona para efeitos hover e animações acionadas por scroll?
Sim, mas com uma distinção clara. Nossa ferramenta gera animações CSS que rodam no carregamento da página ou via uma classe CSS. Para efeitos hover, você precisa envolver a animação gerada em uma pseudoclasse `:hover` — ainda não temos um botão dedicado para isso. Animações acionadas por scroll exigem JavaScript (como Intersection Observer) para adicionar a classe quando o elemento entra na tela. O gerador fornece a animação principal; você controla quando ela dispara. Dica prática: exporte o código, defina um estado `paused` como padrão e use JS para ativar no scroll.
Como Usar
- Escolha preset ou configure
- Ajuste duração e timing
- Preview da animação
- Copie CSS com @keyframes