CSS @keyframes — Bygg Smidiga Animationer utan JavaScript

CSS-animationer ger liv åt gränssnitt — laddningsspinnrar, hover-effekter, inmatningsanimationer och mikrointeraktioner. Men att skriva @keyframes manuellt kräver mental visualisering av varje procentsteg. Vår CSS-animationsgenerator ger en visuell tidslinjeredigerare med levande förhandsvisning.

Vad är en CSS-animation?

CSS-animationer använder @keyframes-regler för att definiera en sekvens av stiländringar som tillämpas på ett element över tid. Varje keyframe anger stilarna vid en viss punkt (0 %, 50 %, 100 %) och webbläsaren interpolerar mellan dem. Egenskapen animation styr varaktighet, timing, fördröjning, iterationsantal och riktning.

Hur använder du CSS-animationsgeneratorn?

Välj en fördefinierad animation (studs, tona, glid, snurra, puls) eller börja från grunden. Redigera keyframes på den visuella tidslinjen — ange transform, opacity och andra egenskaper vid varje steg. Justera varaktighet, easing (linjär, ease-in, ease-out, cubic-bezier) och iterationsantal. Förhandsgranska animationen i realtid och kopiera sedan den genererade CSS:en.

Bästa praxis

Animera bara transform och opacity för smidig 60fps-prestanda. Animering av layoutegenskaper som bredd, höjd eller marginal utlöser dyra reflöden. Använd medieförfrågan prefers-reduced-motion för att inaktivera eller minska animationer för användare med rörelsekänslighet. Håll animationer under 300 ms för UI-återkoppling.