Gerador de Animações CSS

Gere animações CSS keyframe visualmente. Escolha o tipo de animação, duração, easing e iterações — obtenha código CSS pronto para copiar.

Animation preset:

Duration (s)

Delay (s)

Easing

Iterations

Direction

Fill Mode

Preview

Generated CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated-element {
  animation: fadeIn 0.6s ease 0s 1 both;
}

Como Usar Gerador de Animações CSS

1Selecione uma predefinição de animação (fade, slide, bounce, spin, etc.).
2Ajuste a duração, atraso, easing e contagem de iterações.
3Veja a pré-visualização da animação ao vivo no navegador.
4Copie os keyframes CSS gerados e a propriedade de animação.

ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

Acompanhamento de visitantes em tempo real
Privacidade em primeiro lugar, sem banner de cookies
Configurado em dois minutos

Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS

Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.

Gerador de CSS Box Shadow

Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.

Gerador de CSS Border Radius

Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.

Área de Testes CSS Flexbox

Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

Qual é a diferença entre transitions e animations no CSS?▾

Transitions CSS animam uma mudança de propriedade entre dois estados disparada por um evento (hover, foco, mudança de classe): transition: opacity 0.3s ease. Animations CSS usam @keyframes para definir sequências de múltiplos passos que rodam automaticamente: animation: fadeIn 1s ease forwards. Transitions são mais simples para efeitos de hover; animations são melhores para efeitos contínuos (spinners de carregamento), efeitos de entrada ou sequências de múltiplos passos que rodam sem interação do usuário.

O que são funções de easing?▾

Funções de easing controlam como uma animação progride ao longo do tempo. Linear: velocidade constante. Ease: início lento, meio mais rápido, fim lento (padrão). Ease-in: início lento, fim rápido. Ease-out: início rápido, fim lento (bom para animações de saída). Ease-in-out: lento nos dois extremos. cubic-bezier(x1, y1, x2, y2): curva personalizada. steps(n): passos discretos/saltitantes (bom para animações de sprites).

O que animation-fill-mode faz?▾

animation-fill-mode controla quais estilos se aplicam quando a animação não está sendo reproduzida: none (padrão) — nenhum estilo de keyframes se aplica antes/depois. forwards — os estilos do último keyframe permanecem após o fim da animação. backwards — os estilos do primeiro keyframe se aplicam durante o período de delay. both — combina forwards e backwards. Para animações de entrada (como fadeIn), use fill-mode: both para evitar que o elemento pisque em seu estado pré-animação.

Como disparo animações ao rolar a página?▾

Apenas com CSS: use a propriedade animation-play-state. Adicione uma classe com animation-play-state: running via JavaScript quando o elemento rolar para a tela usando IntersectionObserver. CSS moderno: a API @scroll-timeline e animation-timeline: scroll() permite animações CSS orientadas por scroll no Chrome 115+. Uma abordagem simples: adicione uma classe "animate" via JavaScript quando o elemento entrar na viewport, e defina as animações CSS para essa classe.

Devo usar animations CSS ou animações JavaScript?▾

Animations CSS são preferidas para animações simples e discretas — elas rodam na thread do compositor e evitam layout/paint quando possível. JavaScript (Web Animations API, GSAP, Framer Motion) é melhor para: sequenciamento complexo, animações interativas, movimento baseado em física e animações que dependem de valores em tempo de execução. A Web Animations API dá ao JavaScript controle sobre as animations CSS: element.animate([...keyframes], { duration: 300 }). GSAP é o padrão-ouro para animações complexas.