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

CSS Keyframe Animation Generator

Byg rigtige @keyframes-animationer på en multi-track-tidslinje - transformation, opacitet og baggrundsfarvestop pr. spor - med et trækbart afspilningshoved, der viser den nøjagtige interpolerede midt-animationstilstand.

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 procentvise kontrolpunkter, der hver erklærer, hvordan en egenskab skal se ud på det nøjagtige tidspunkt, hvor browseren interpolerer alt derimellem. At bygge en i hånden betyder, at du holder flere af disse procentvise kontrolpunkter i dit hoved på én gang på tværs af flere ejendomme - denne generator forvandler den tidslinje til noget, du rent faktisk kan se og trække: en vandret bane pr. ejendom, med en stopmarkør ved hvert kontrolpunkt.

Midtpunktet er scrub-spillehovedet. Træk den til et hvilket som helst punkt mellem 0 % og 100 %, og forhåndsvisningsboksen hopper til den nøjagtige kombinerede tilstand på det tidspunkt - ikke den nærmeste keyframe, men en ægte lineært interpoleret værdi beregnet mellem de to stop, der omgiver afspilningshovedet på hvert aktivt spor. Numeriske egenskaber som position, rotation og skala interpoleres som almindelige tal; baggrundsfarve interpolerer hver rød, grøn og blå kanal uafhængigt, hvilket er det, der får et farvespor til at falme jævnt gennem mellemliggende nuancer i stedet for at springe mellem de farver, du faktisk indstiller.

Flere spor kombineres automatisk til én sammenhængende animation: hver transformationsbaseret egenskab (flyt, roter, skaler) smelter sammen til en enkelt transformationserklæring ved hver keyframe-procent, mens opacitet og baggrundsfarve forbliver på deres egne linjer, præcis som ægte håndskrevet CSS ville se ud. Procentsatser, hvor et givet spor ikke har noget eksplicit stop, udelades simpelthen med vilje fra egenskabens erklæringer - browserens egen keyframe-interpolation udfylder hullet mellem de stop, der findes, på samme måde som det ville gøre for enhver @keyframes-regel, du har indtastet i hånden.

Fem forudindstillinger - hoppe, ryste, pulsere, fade og glide-in - indlæser en komplet, klar til at justere tidslinje (inklusive en fornuftig varighed, timingfunktion og gentagelsesantal) med et enkelt klik. Tryk på Afspil på et hvilket som helst tidspunkt for at se den rigtige CSS-animation køre på preview-elementet, genereret på farten gennem et dynamisk indsprøjtet stylesheet, og kopier derefter hele @keyframes-blokken plus .animated-element { animation: ... } stenografi direkte ind i dit eget projekt. Som ethvert værktøj på dette websted, kører det hele lokalt i browseren, uden at der nogensinde er uploadet noget.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Multi-track tidslinje til transformation (translateX, translateY, rotate, scale), opacitet og baggrundsfarve, hver med sine egne trækbare stop.
  • Ægte lineær interpolation - numeriske egenskaber og per-kanal RGB for farver - driver scrub-forhåndsvisningen mellem to vilkårlige stop på et spor.
  • En Afspil-knap anvender den faktisk genererede @keyframes CSS til forhåndsvisningen via et dynamisk injiceret stylesheet, plus en kopierbar fuld @keyframes + animationsstenografioutput.

Vigtige fordele

✓ Det trækbare afspilningshoved viser en ægte interpoleret midt-animationstilstand - ikke et spring mellem keyframe-stop - præcis som browseren rent faktisk vil gengive den.
✓ Hver ejendom bor på sin egen bane med sine egne stop, så et opspring, et farveskift og en fade kan køre på det samme element på én gang uden at bekæmpe hinanden.
✓ Fem færdige forudindstillinger (bounce, shake, pulse, fade, slide-in) giver et fungerende udgangspunkt med et enkelt klik, hvorefter hvert stop forbliver fuldt redigerbart derfra.

Brug Cases

  • • Træk scrub-afspilningshovedet til et hvilket som helst punkt i en hoppe- eller pulsanimation for at se den nøjagtige virkelige interpolerede midt-animationstilstand, før du sender CSS'en.
  • • Læg et translateX-spor og et opacitetsspor sammen for at bygge en rigtig slide-in-and-fade indgangsanimation, og kopier derefter hele @keyframes + animationsstenografien.
  • • Tilføj et baggrundsfarvespor ved siden af et skalaspor for at animere en knaps farve og størrelse sammen, og se RGB-kanalerne blande sig live, mens du skrubber.