← Alle værktøjer
/ CSS Animation Generator
✨
CSS Animation Generator
Opret CSS @keyframe-animationer visuelt. Vælg animationstype, timing, varighed, og se en live forhåndsvisning. Kopier hele CSS-koden med det samme. Der er ikke behov for JavaScript.
Animationstype
Varighed: 1s
Forsinke: 0s
Iterationstælling
Timing funktion
Fyldningstilstand
Retning
✨
CSS Animation Generator — Sådan fungerer det
Vælg en animationstype, konfigurer varighed, timingfunktion, forsinkelse og iterationsantal. Live preview viser animationen i realtid, og værktøjet genererer komplet CSS @keyframes kode du kan kopiere til ethvert projekt.
Tilgængelige animationstyper
Falme — Glat opacitetsovergang. Fade ind og fade ud effekter.
Glide — Skub ind fra top, bund, venstre eller højre.
Bounce — Fjederlignende hoppeeffekt. Fantastisk til opmærksomhedsfangende brugergrænseflade.
Spin / Roter — Kontinuerlig eller engangsrotation. Indlæsning af spinnere.
Puls — Skaler pulserende effekt for badges, meddelelser, live indikatorer.
Ryste — Vandret rystelse for fejltilstande og advarsler.
Vend — 3D flip-effekt på Y-aksen. Kort flip interfaces.
Zoom — Skaler zoom ind og zoom ud med tilpasselig intensitet.
Ofte stillede spørgsmål
CSS-animationer foretrækkes til enkle, dekorative effekter. De kører på GPU-kompositor-tråden og blokerer ikke JavaScript-hovedtråden, hvilket resulterer i en jævnere ydeevne. Brug JavaScript-animationer til komplekse, interaktive eller fysikbaserede sekvenser.
animation-fill-mode: forwards holder elementet i sin endelige tilstand, efter at animationen slutter. backwards anvender starttilstanden i forsinkelsesperioden. both anvender begge regler samtidigt.Tilføje
.element:hover { animation-play-state: paused; } til din CSS. Dette sætter enhver kørende CSS-animation på pause, når brugeren svæver over elementet, hvilket er nyttigt til karruseller og animerede ikoner.Kun animere
transform og opacity for 60 fps jævne animationer. Disse egenskaber håndteres af GPU'en og udløser ikke layout-reflows. Undgå at animere width, height, top, eller left egenskaber, da de forårsager dyre layout-genberegninger.