Animações

Adicione até 3 animações para encadeamento. A propriedade animation gerada combinará todas.

Preview

CSS

Tipos de Animação

Controles — Animação 1

Nome da Animação

Duração 1s

Delay 0s

Timing Function

Iterações

Direção

Fill Mode

Editor de Keyframes (Avançado)

CSS Gerado

Como usar o Gerador de Animações CSS

Selecione um tipo de animação no painel de presets ou ajuste os keyframes manualmente no editor avançado. Configure duração, delay, timing function, iterações e mais. O código @keyframes + animation CSS é gerado automaticamente.

Presets: Fade In/Out, Slide In (4 direções), Scale, Rotate, Bounce, Shake, Pulse, Flip, Swing
Editor de Keyframes: Adicione stops em qualquer porcentagem com propriedades CSS personalizadas
Múltiplas Animações: Adicione até 3 animações encadeadas na mesma propriedade animation
cubic-bezier: Defina curvas de timing customizadas com parâmetros (x1, y1, x2, y2)
Replay: Clique em Replay para reiniciar a pré-visualização a qualquer momento