Gerador de Animações (@keyframes)
Escolha um preset de animação, ajuste duração e timing, e copie o @keyframes pronto.
Propriedades CSS utilizadas
@keyframesDefine os estágios de uma animação por porcentagem do tempo total (0% a 100%), descrevendo como as propriedades mudam ao longo da execução.
animation (shorthand)Combina nome, duração, timing-function, delay e iteration-count numa única declaração aplicada ao elemento que deve animar.
Perguntas frequentes
Animation permite múltiplos estágios via @keyframes e pode repetir indefinidamente; transition anima apenas entre dois estados (início e fim) e roda uma vez por mudança.
Use animation-play-state: paused, alternável via JavaScript ou :hover.
Priorize animar transform e opacity — são as propriedades mais baratas por rodarem na GPU sem recalcular layout.
Ferramentas relacionadas
Gerador de Transitions
Configure propriedade, duração, easing e delay para transições suaves.
Gerador de Transform
Combine translate, rotate, scale e skew num único transform.
Gerador de Loaders CSS
Spinners, dots e barras de carregamento feitos 100% em CSS puro.