Gerador Animação CSS Grátis: Criar Animações Visual Online

A Escolha preset ou configure manualmente. Preview ao vivo.

A Controla velocidade: linear, ease, ease-in, ease-out, ease-in-out.

A Sim, regra @keyframes e propriedade animation.

A 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.

A 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.

A Nosso gerador cria o bloco @keyframes completo, não apenas um gatilho de hover. Você precisa envolver a animação exportada manualmente dentro de uma pseudo-classe :hover. Por exemplo, copie a classe .my-element, renomeie para .my-element:hover e cole o código da animação ali. A pré-visualização ao vivo só mostra a animação no carregamento, então teste o efeito hover no seu próprio editor. Excelente para demonstrações acadêmicas onde alunos inspecionam o CSS diretamente.

A Nem um pouco, não. Animações CSS rodam na GPU em vez da thread principal do navegador, sendo muito mais eficientes que alternativas em JavaScript. Um bloco @keyframes com 5 quadros-chave adiciona uns 200 bytes ao seu arquivo. Compare isso com um plugin jQuery de 5KB fazendo a mesma coisa. Você precisaria de dezenas de animações complexas rodando simultaneamente para sentir qualquer impacto. Na maioria dos projetos, o efeito é irrelevante. Dica prática: evite animar propriedades como box-shadow ou filter em dispositivos móveis — elas ainda disparam repaints caros.

A Animações travadas geralmente vêm de animar as propriedades erradas. Use transform e opacity — elas rodam na GPU e ficam suaves a 60fps. Animar width, height ou margin força o navegador a recalcular o layout a cada frame, o que engasga. Nosso gera só transform e opacity por padrão exatamente por isso. Teste rápido: abra a aba Performance no DevTools, grave alguns segundos e procure barras roxas de Layout — são elas que matam a suavidade.