CSS-animasjonsgenerator — gratis online verktøy

Hva er CSS-animasjonsgenerator?

Gratis online CSS-animasjonsgenerator. Lag CSS-nøkkelrammeanimasjoner med en visuell editor.

CSS-animasjoner vekker nettgrensesnitt til live med bevegelse, visuell tilbakemelding og engasjerende overganger. Fra subtile hover-effekter til oppmerksomhetsfangende lasteindikatorer er keyframe-animasjoner avgjørende for moderne webdesign. CSS Animation Generator gir 10 ferdiglagde keyframe-animasjoner med justerbare innstillinger for timing, ease og repetisjon.

Velg mellom bounce (sprett), shake (risting), pulse (pulserende), spin (rotasjon), fade in (inntoning), slide in left (gli inn fra venstre), slide in right (gli inn fra høyre), flip (vending), wobble (vakling) og swing (sving). Hver animasjon har en dedikert @keyframes-definisjon som håndterer start-, mellom- og sluttilstandene. Velg en animasjon og forhåndsvis den umiddelbart på demo-elementet.

Juster varigheten (hvor lang tid én syklus tar, fra 0,1 s til 10 s), ease-funksjonen (ease, ease-in, ease-out, ease-in-out, linear eller en egendefinert cubic-bezier-verdi), forsinkelsen (tid før animasjonen starter, fra 0 s til 5 s), antall iterasjoner (1, 2, 3, infinite eller egendefinert) og retningen (normal, reverse, alternate, alternate-reverse).

Live-forhåndsvisningen viser animasjonen som spilles på et demo-element, med den aktuelle @keyframes-koden vist sammen med hele CSS-en. Kopier hele animasjonskoden — inkludert både @keyframes-regelen og animation-egenskapen — med ett klikk. Den genererte koden bruker syntaks uten leverandørprefikser, som fungerer i alle moderne nettlesere.

Praktiske bruksområder for CSS-animasjonsgenerator

Legge til en subtil pulserende animasjon på en handlingsknapp

En handlingsknapp trenger forsiktig pulsing for å tiltrekke oppmerksomhet. Velg pulse-animasjonen, sett varigheten til 2s, easing til ease-in-out og iterasjon til infinite. Knappen skalerer forsiktig opp og ned, og skaper subtil visuell vektlegging uten å distrahere.

Lage en lasteindikator med sprett-animasjon

En lastetilstand trenger en engasjerende indikator. Velg bounce-animasjonen, sett varigheten til 1s, easing til ease-in-out og iterasjon til infinite. Demo-elementet spretter kontinuerlig. Tilpass keyframen til å rotere 360 grader for en spinner-variant.

Animere en fade-in-inngang for sideinnhold

Sideseksjoner bør tones inn når de vises. Velg fade-in-animasjonen, sett varigheten til 1,5s, easing til ease-out, forsinkelse til 0,3s, iterasjon til 1. Elementet toner fra gjennomsiktig til ugjennomsiktig med en svak oppoverbevegelse. Bruk denne animasjonsklassen på sideseksjoner med det biblioteket du foretrekker for intersection observer.

Hvorfor bruke CSS-animasjonsgenerator?

10 klar-til-bruk keyframe-animasjoner
Justerbar varighet, easing, forsinkelse og iterasjoner
Sanntids forhåndsvisning

Slik bruker du CSS-animasjonsgenerator — Steg for steg

Velg en forhåndsinnstilt animasjon eller tilpass dine keyframes.

Juster varighet, easing, forsinkelse og iterasjoner.

Kopier den genererte CSS-koden.

Hvem er CSS-animasjonsgenerator best for?

nettanimasjoner
UI-interaksjoner
landingssider

Profftips for CSS-animasjonsgenerator

1Bruk cubic-bezier-easing-alternativet for presis timingkontroll. Vanlige verdier: ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1).
2For inngangsanimasjoner (fade in, slide in) bør du bruke en varighet på 0,5–1,5 s og ease-out-easing for naturlig retardasjon. For vektleggingsanimasjoner (bounce, pulse) fungerer 1–3 s med ease-in-out godt.
3Unngå å animere for mange elementer samtidig. Ytelsen er best når du animerer transform- og opasitets-egenskapene. Unngå å animere bredde-, høyde- eller posisjons-egenskaper som utløser layout-reberegninger.
4Sett animation-fill-mode til forwards for å holde slutttilstanden synlig etter at animasjonen er fullført. Dette er avgjørende for inngangsanimasjoner der elementet skal forbli synlig.

CSS-animasjonsgenerator — Ofte stilte spørsmål

What animations are available?

Bounce, shake, pulse, spin, fade in, slide in left, slide in right, flip, wobble, and swing.

Can I customize the keyframes?

The generator provides the full @keyframes block. You can further edit or combine animations by modifying the generated CSS.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS-animasjonsgenerator really free to use?

Yes, CSS-animasjonsgenerator is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til å bruke CSS-animasjonsgenerator?

Gratis onlineverktøy — fungerer i nettleseren din, ingen registrering nødvendig. Begynn å bruke det nå.

Prøv det nå