Hopp til innhold

CSS Animation Generator

Lag CSS keyframe-animasjoner visuelt med live forhåndsvisning. Velg blant forhåndsinnstillinger som bounce, pulse, shake, spin. Juster varighet, timing og mer. Kopier CSS-kode. Gratis nettverktøy.

Forhåndsvisning

1.0s
0.0s

CSS-utdata

 

Hva er CSS-animasjoner?

CSS-animasjoner lar deg animere overganger mellom CSS-egenskapsverdier over tid. De består av to deler: @keyframes-regler som definerer animasjonstrinnene, og animation-egenskapen som styrer timing, retning og avspilling.

Animasjonsforhåndsinnstillinger

Dette verktøyet inkluderer vanlige animasjonsforhåndsinnstillinger: bounce (vertikal sprett), pulse (skalering opp og ned), shake (horisontal risting), spin (360° rotasjon), fadeIn/fadeOut (gjennomsiktighetsoverganger), slideIn/slideOut (skyv fra side), swing (pendelrotasjon) og wobble (asymmetrisk risting).

Personvern

All animasjonsgenerering kjøres 100 % i nettleseren din. Ingen data sendes til noen server.