Gerador de Animacoes CSS

Crie animacoes CSS @keyframes visualmente. Defina keyframes, timing e easing com preview ao vivo.

Como funciona: Defina keyframes com transforms e opacidade. Ajuste timing, easing e duracao. Visualize sua animacao ao vivo e copie o CSS.

0%25%50%75%100%

@keyframes fadeIn {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: fadeIn 0.8s ease 0s 1 normal forwards;
}

O que sao animacoes CSS?

Animacoes CSS permitem animar elementos HTML sem JavaScript. Usando regras @keyframes, voce define os estilos em varios pontos durante a sequencia de animacao. O navegador interpola suavemente entre keyframes, criando transicoes fluidas para transforms, opacidade, cores e mais.

Como usar o gerador de animacoes

Escolha um preset ou comece do zero. Adicione keyframes em porcentagens especificas (0% a 100%) e configure os valores de transform e opacidade para cada um. Ajuste a duracao da animacao, funcao de timing, delay e contagem de iteracoes. Visualize a animacao em tempo real e copie o CSS gerado quando estiver satisfeito.

Funcoes de timing de animacao

A funcao de timing controla a curva de velocidade da animacao. 'ease' comeca lento, acelera e depois desacelera. 'linear' mantem velocidade constante. 'ease-in' comeca lento e acelera. 'ease-out' comeca rapido e desacelera. Para curvas personalizadas, use cubic-bezier() com quatro pontos de controle.

Melhores praticas de animacao CSS

  • Prefira transform e opacity para animacoes — sao aceleradas por GPU e nao provocam recalculo de layout
  • Use will-change com moderacao para indicar ao navegador sobre animacoes proximas
  • Mantenha animacoes abaixo de 300ms para feedback de UI, 500ms-1s para transicoes
  • Use a media query prefers-reduced-motion para respeitar configuracoes de acessibilidade
  • Evite animar width, height, top, left — use transform: translate() no lugar
  • Use animation-fill-mode: forwards para manter o estado final apos a animacao