⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS Keyframe-animasjonsgenerator

Bygg ekte @keyframes-animasjoner på en flerspors tidslinje — transform, opacity og background-color-stopp per spor — med en dra-bar spiller som viser eksakt interpolert midt-animasjons-tilstand.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

Klikk hvor som helst på et felt for å legge til et stopp der. Dra et stopp for å flytte det, eller rediger dets %- og verdifelt under feltet. Dobbeltklikk et stopp for å fjerne det (minimum 2 per spor).

Behandler … 0%

Resultat

En CSS @keyframes-regel er egentlig en liten tidslinje: et sett med prosentvise sjekkpunkter, der hvert enkelt erklærer hvordan en egenskap skal se ut på akkurat det tidspunktet, mens nettleseren interpolerer alt imellom. Å bygge en for hånd betyr å holde flere av disse prosentvise sjekkpunktene i hodet samtidig på tvers av flere egenskaper — denne generatoren gjør tidslinjen til noe du faktisk kan se og dra i: ett horisontalt felt per egenskap, med en stoppmarkør ved hvert sjekkpunkt.

Hovedattraksjonen er skrubb-spilleren. Dra den til et vilkårlig punkt mellom 0 % og 100 %, og forhåndsvisningsboksen hopper til den nøyaktige kombinerte tilstanden i det øyeblikket — ikke til nærmeste keyframe, men til en ekte lineært interpolert verdi beregnet mellom de to stoppene som omgir spilleren på hvert aktive spor. Numeriske egenskaper som posisjon, rotasjon og skala interpoleres som vanlige tall; background-color interpoleres uavhengig for hver rød, grønn og blå kanal, noe som får et fargespor til å tone jevnt gjennom mellomliggende nyanser i stedet for å hoppe mellom fargene du faktisk satte.

Flere spor kombineres automatisk til én sammenhengende animasjon: alle transform-baserte egenskaper (flytte, rotere, skalere) slås sammen til én enkelt transform-deklarasjon ved hver keyframe-prosent, mens opacity og background-color forblir på sine egne linjer, akkurat slik ekte håndskrevet CSS ville sett ut. Prosenter der et gitt spor ikke har noe eksplisitt stopp utelates med vilje fra den egenskapens deklarasjoner — nettleserens egen keyframe-interpolering fyller gapet mellom de stoppene som faktisk finnes, på samme måte som den ville gjort for enhver @keyframes-regel du skrev for hånd.

Fem forhåndsvalg — sprett, rist, puls, uttoning og gli inn — laster en komplett, ferdig-å-tilpasse tidslinje (inkludert en fornuftig varighet, timing-funksjon og antall repetisjoner) i ett klikk. Trykk Spill av når som helst for å se den ekte CSS-animasjonen kjøre på forhåndsvisningselementet, generert i sanntid via et dynamisk injisert stilark, og kopier deretter hele @keyframes-blokken pluss .animated-element { animation: … }-shorthand-en rett inn i ditt eget prosjekt. Som alle verktøy på dette nettstedet, kjører alt lokalt i nettleseren uten at noe noen gang lastes opp.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Flerspors tidslinje for transform (translateX, translateY, rotate, scale), opacity og background-color, hver med sine egne dra-bare stopp.
  • Ekte lineær interpolering — numeriske egenskaper og per-kanal RGB for farger — driver forhåndsvisningen mellom to vilkårlige stopp på et spor.
  • En Spill av-knapp legger den faktisk genererte @keyframes-CSS-en på forhåndsvisningselementet via et dynamisk injisert stilark, pluss en kopierbar full @keyframes + animation shorthand-utdata.

Viktigste fordeler

✓ Den dra-bare spilleren viser reell interpolert midt-animasjons-tilstand — ikke et hopp mellom keyframe-stopp — nøyaktig slik nettleseren faktisk vil gjengi det.
✓ Hver egenskap har sitt eget spor med sine egne stopp, slik at en sprett, et fargeskift og en uttoning kan kjøre på samme element samtidig uten å kræsje med hverandre.
✓ Fem ferdige forhåndsvalg (sprett, rist, puls, uttoning, gli inn) gir et fungerende utgangspunkt i ett klikk, og deretter kan hvert stopp redigeres fritt derfra.

Bruksområder

  • • Dra scrub-avspillingshodet til et hvilket som helst punkt i en sprett- eller pulsanimasjon for å se den nøyaktige, interpolerte tilstanden midt i animasjonen før du sender CSS-en.
  • • Legg et translateX-spor og et opacitetsspor oppå hverandre for å bygge en ekte «skli-inn-og-blekne»-innganganimasjon, og kopier deretter hele @keyframes + animation shorthand-en.
  • • Legg til et bakgrunnsfargespor ved siden av et skalaspor for å animere fargen og størrelsen til en knapp samtidig, og se hvordan RGB-kanalene blandes i sanntid mens du skrubber.