⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

CSS Keyframe-animationsgenerator

Byg ægte @keyframes-animationer på en tidslinje med flere spor – stop for transform, opacity og background-color pr. spor – med en trækbar afspilningshoved, der viser den nøjagtige interpolerede tilstand midt i animationen.

🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.

Klik hvor som helst på en bane for at tilføje et stop der. Træk et stop for at flytte det, eller rediger dets %- og værdifelter under banen. Dobbeltklik på et stop for at fjerne det (minimum 2 pr. spor).

Behandler... 0%

Resultat

En CSS @keyframes-regel er i virkeligheden en lille tidslinje: et sæt procentuelle kontrolpunkter, der hver erklærer, hvordan en egenskab skal se ud på det nøjagtige tidspunkt, mens browseren interpolerer alt derimellem. At bygge en sådan i hånden betyder at holde flere af disse procentsats-kontrolpunkter i hovedet på én gang på tværs af flere egenskaber – denne generator gør den tidslinje til noget, du faktisk kan se og trække i: én vandret bane pr. egenskab, med en stopmarkør ved hvert kontrolpunkt.

Områdets midtpunkt er scrub-afspilningshovedet. Træk det til et vilkårligt punkt mellem 0 % og 100 %, og forhåndsvisningsboksen hopper til den nøjagtige kombinerede tilstand på det øjeblik – ikke den nærmeste keyframe, men en reel lineært-interpoleret værdi beregnet mellem de to stop, der omgiver afspilningshovedet på hvert aktivt spor. Numeriske egenskaber som position, rotation og skalering interpoleres som almindelige tal; background-color interpolerer hver rød, grøn og blå kanal uafhængigt, hvilket er det, der får et farvespor til at tone jævnt gennem mellemliggende farvenuancer i stedet for at hoppe mellem de farver, du faktisk har sat.

Flere spor kombineres automatisk til én sammenhængende animation: alle transform-baserede egenskaber (flyt, roter, skalér) flettes til en enkelt transform-deklaration ved hver keyframe-procentsats, mens opacity og background-color forbliver på deres egne linjer, præcis som ægte håndskrevet CSS ville se ud. Procentsatser, hvor et givet spor ikke har et eksplicit stop, udelades helt bevidst fra den pågældende egenskabs deklarationer – browserens egen keyframe-interpolation udfylder hullet mellem de stop, der faktisk findes, på samme måde som den ville gøre for enhver @keyframes-regel, du selv havde skrevet i hånden.

Fem forudindstillinger – bounce, shake, pulse, fade og slide-in – indlæser en komplet, klar-til-at-tilpasse tidslinje (inklusive en fornuftig varighed, timing-funktion og gentagelsesantal) med ét klik. Tryk på Play når som helst for at se den faktiske CSS-animation køre på forhåndsvisningselementet, genereret i farten via et dynamisk indsat stylesheet, og kopier derefter hele @keyframes-blokken plus .animated-element { animation: ... }-shorthand direkte ind i dit eget projekt. Som alle værktøjer på dette site kører det hele lokalt i browseren uden at noget nogensinde uploades.

Kan du lide dette værktøj? Synes du, produktet er nyttigt? Ser du potentiale i det og vil støtte det?

🛡️
Køres i browseren

Dine filer og input forlader aldrig denne enhed. Al behandling foregår offline. 100 % sikkert.

Accepterede formater og regler

  • Tidslinje med flere spor til transform (translateX, translateY, rotate, scale), opacity og background-color, hver med sine egne trækbare stop.
  • Ægte lineær interpolation – numeriske egenskaber og pr. kanal RGB for farver – driver scrub-forhåndsvisningen mellem to vilkårlige stop på et spor.
  • En Play-knap anvender den faktisk genererede @keyframes CSS på forhåndsvisningen via et dynamisk indsat stylesheet, plus en kopierbar fuld @keyframes- og animation-shorthand-output.

Vigtigste fordele

✓ Den trækbare afspilningshoved viser den reelle interpolerede tilstand midt i animationen – ikke et hop mellem keyframe-stop – præcis som browseren vil gengive den.
✓ Hver egenskab har sit eget spor med sine egne stop, så et bounce, et farveskift og en fade-udtoning kan køre på det samme element på én gang uden at modarbejde hinanden.
✓ Fem færdige forudindstillinger (bounce, shake, pulse, fade, slide-in) giver et fungerende udgangspunkt med ét klik, og derefter forbliver hvert stop fuldt redigerbart.

Anvendelsestilfælde

  • • Træk playheaden til et hvilket som helst tidspunkt i en bounce- eller pulse-animation for at se den præcise, interpolerede midt-animationstilstand, før du sender CSS’en.
  • • Læg et translateX-spor og et opacity-spor sammen for at bygge en ægte slide-in-og-fade entré-animation, og kopiér derefter hele @keyframes + animation shorthand.
  • • Tilføj et background-color-spor ved siden af et scale-spor for at animere en knaps farve og størrelse samtidig, og se RGB-kanalerne blende live, mens du scrubber.