CSS-animationsgenerator — Gratis Online Værktøj

Hvad er CSS-animationsgenerator?

Gratis online CSS-animationsgenerator. Opret CSS keyframe-animationer med visuel editor.

CSS-animationer vækker webinterfaces til live med bevægelse, visuel feedback og engagerende overgange. Fra subtile hover-effekter til opmærksomhedskrævende indlæsningsindikatorer er keyframe-animationer essentielle for moderne webdesign. CSS Animation Generator giver 10 færdiglavede keyframe-animationer med tilpasselige indstillinger for varighed, tempo (easing) og gentagelse.

Vælg blandt bounce, shake, pulse, spin, fade in, slide in left, slide in right, flip, wobble og swing. Hver animation har en dedikeret @keyframes-definition, der håndterer start-, mellem- og sluttilstandene. Vælg en animation og forhåndsvis den øjeblikkeligt på demo-elementet.

Juster varigheden (hvor lang tid én cyklus tager, fra 0.1s til 10s), easing-funktionen (ease, ease-in, ease-out, ease-in-out, linear eller en tilpasset cubic-bezier-værdi), forsinkelsen (tid før animationen starter, fra 0s til 5s), gentagelsesantallet (1, 2, 3, infinite eller tilpasset) og retningen (normal, reverse, alternate, alternate-reverse).

Live-forhåndsvisningen viser animationen, der afspilles på et demo-element, med den aktuelle @keyframes-kode vist sammen med den fulde CSS. Kopiér hele animationskoden — inklusive både @keyframes-reglen og animation-egenskaben — med ét klik. Den genererede kode bruger syntaks uden vendor-prefix, som fungerer i alle moderne browsere.

Praktiske anvendelser af CSS-animationsgenerator

Tilføj en subtil pulse-animation til en call-to-action-knap

En CTA-knap har brug for blid pulsering for at tiltrække opmærksomhed. Vælg pulse-animationen, sæt varigheden til 2s, easing til ease-in-out og gentagelse til infinite. Knappen skalerer blidt op og ned og skaber subtil visuel vægt uden at virke distraherende.

Opret en indlæsningsspinner med bounce-animation

En indlæsningstilstand har brug for en engagerende indikator. Vælg bounce-animationen, sæt varigheden til 1s, easing til ease-in-out og gentagelse til infinite. Demo-elementet hopper kontinuerligt. Tilpas keyframen til at rotere 360 grader for en spinner-variant.

Animer en fade-in-entré for sideindhold

Sideafsnit bør fade ind, når de vises. Vælg fade-in-animationen, sæt varigheden til 1.5s, easing til ease-out, forsinkelsen til 0.3s og gentagelse til 1. Elementet går fra gennemsigtigt til uigennemsigtigt med en let opadgående bevægelse. Anvend denne animationsklasse på sideafsnit ved hjælp af dit foretrukne intersection observer-bibliotek.

Hvorfor bruge CSS-animationsgenerator?

10 klar-til-brug keyframe-animationer
Justerbar varighed, easing, forsinkelse og iterationer
Forhåndsvisning i realtid

Sådan bruger du CSS-animationsgenerator — Trin for trin

Vælg en forudindstillet animation, eller tilpas dine keyframes.

Juster varighed, easing, forsinkelse og iterationer.

Kopier den genererede CSS-kode.

Hvem er CSS-animationsgenerator bedst til?

webanimationer
UI-interaktioner
landingssider

Pro-tips til CSS-animationsgenerator

1Brug cubic-bezier-easing-muligheden for præcis tidsstyring. Almindelige værdier: ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1).
2Til entré-animationer (fade in, slide in) skal du bruge en varighed på 0.5-1.5s og ease-out-easing for naturlig opbremsning. Til vægt-animationer (bounce, pulse) fungerer 1-3s med ease-in-out godt.
3Undgå at animere for mange elementer samtidigt. Ydeevnen er bedst, når du animerer transform- og opacity-egenskaber. Undgå at animere width-, height- eller position-egenskaber, der udløser layout-genberegninger.
4Sæt animation-fill-mode: forwards for at holde sluttilstanden synlig, når animationen er færdig. Det er essentielt for entré-animationer, hvor elementet skal forblive synligt.

CSS-animationsgenerator — Ofte stillede spørgsmå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-animationsgenerator really free to use?

Yes, CSS-animationsgenerator 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 at bruge CSS-animationsgenerator?

Gratis onlineværktøj — fungerer i din browser, ingen tilmelding nødvendig. Start med at bruge det nu.

Prøv det nu