🎬 Gerador de Animação CSS

Escolha uma animação, configure as propriedades e copie o CSS com @keyframes pronto.

Animação

Timing

Duração: 1s

Delay: 0s

Iterações

Fill mode

✦

CSS

ℹ️ Sobre esta ferramenta

A propriedade CSS animation combina nome do keyframe, duração, timing function, delay, iterações e fill-mode. Os @keyframes definem o estado inicial e final (e intermediários) da animação. Combine com animation-play-state: paused para controle via JavaScript.