TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

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

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Sobre esta ferramenta

O Gerador de Animações CSS cria animações suaves configurando presets de keyframes, temporização, duração, atraso e iterações. Uma pré-visualização ao vivo mostra a animação em ação.

Animações CSS usando transform e opacity são eficientes pois são compostas na GPU e não acionam layout ou repintura.

Como usar

  1. Selecione um tipo de animação no menu suspenso.
  2. Defina a duração (ex.: 0.5s, 2s).
  3. Escolha uma função de temporização para controlar o easing.
  4. Opcionalmente defina um atraso antes da animação iniciar.
  5. Defina a contagem de iterações (número ou infinite).
  6. Clique em Reproduzir para visualizar e Copiar para exportar o CSS.

Casos de uso

Desenvolvedores front-end usam animações de fade e slide para melhorar a performance percebida. Designers de UI prototipam micro-interações como pulsos de botão e agitações de notificação.

Perguntas frequentes

  • O que é fill-mode: both? — A animação aplica os estilos iniciais antes de começar e mantém os estilos finais após terminar. É a configuração mais útil.
  • Como fazer uma animação repetir para sempre? — Defina a contagem de iterações como infinite.
  • Animações CSS são melhores que JavaScript? — Para efeitos simples e declarativos, animações CSS são preferidas. Para sequenciamento complexo ou interatividade, JavaScript oferece mais controle.