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

CSS Keyframe Animation Generator

Bygg ekte @keyframes-animasjoner på en flerspors tidslinje – transformasjon, opasitet og bakgrunnsfargestopp per spor – med et dragbart spillehode som viser den eksakte interpolerte midanimasjonstilstanden.

Klikk hvor som helst på en bane for å legge til et stopp der. Dra et stopp for å flytte det, eller rediger dets %- og verdifelt under kjørefeltet. Dobbeltklikk på 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, som hver erklærer hvordan en egenskap skal se ut akkurat i det øyeblikket, med nettleseren som interpolerer alt i mellom. Å bygge en for hånd betyr å holde flere av disse prosentvise sjekkpunktene i hodet samtidig på tvers av flere eiendommer – denne generatoren gjør den tidslinjen til noe du faktisk kan se og dra: én horisontal bane per eiendom, med en stoppmarkør ved hvert sjekkpunkt.

Midtpunktet er scrub-spillehodet. Dra den til et hvilket som helst punkt mellom 0 % og 100 %, og forhåndsvisningsboksen hopper til den nøyaktige kombinerte tilstanden på det øyeblikket – ikke nærmeste nøkkelbilde, men en ekte lineært interpolert verdi beregnet mellom de to stoppene som omgir spillehodet på hvert aktivt spor. Numeriske egenskaper som posisjon, rotasjon og skala interpoleres som vanlige tall; bakgrunnsfarge interpolerer hver rød, grønn og blå kanal uavhengig, noe som gjør at et fargespor blekner jevnt gjennom mellomtoner i stedet for å hoppe mellom fargene du faktisk angir.

Flere spor kombineres automatisk til én sammenhengende animasjon: hver transformasjonsbasert egenskap (flytt, roter, skaler) smelter sammen til en enkelt transformasjonserklæring ved hver nøkkelbildeprosent, mens opasitet og bakgrunnsfarge forblir på sine egne linjer, akkurat som ekte håndskrevet CSS ville se ut. Prosentandeler der et gitt spor ikke har noe eksplisitt stopp blir ganske enkelt utelatt fra egenskapens erklæringer med vilje – nettleserens egen keyframe-interpolasjon fyller gapet mellom hvilke stopp som finnes, på samme måte som for enhver @keyframes-regel du skrev inn for hånd.

Fem forhåndsinnstillinger – sprett, riste, pulser, fade og skyv inn – laster inn en komplett, klar til å finjustere tidslinje (inkludert en fornuftig varighet, timingfunksjon og gjentatt telling) med ett klikk. Trykk på Spill av når som helst for å se den ekte CSS-animasjonen kjøres på forhåndsvisningselementet, generert på farten gjennom et dynamisk injisert stilark, og kopier deretter hele @keyframes-blokken pluss .animated-element { animasjon: ... } stenografi rett inn i ditt eget prosjekt. Som alle andre verktøy på dette nettstedet, kjører alt lokalt i nettleseren uten at noe noen gang er lastet opp.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Multi-track tidslinje for transformasjon (translateX, translateY, rotate, scale), opasitet og bakgrunnsfarge, hver med sine egne dragbare stopp.
  • Ekte lineær interpolasjon – numeriske egenskaper og per-kanal RGB for farger – driver scrub-forhåndsvisningen mellom to stopp på et spor.
  • En Play-knapp bruker den faktisk genererte @keyframes CSS på forhåndsvisningen via et dynamisk injisert stilark, pluss en kopierbar full @keyframes + animasjonsstenografiutgang.

Viktige fordeler

✓ Avspillingshodet som kan dras viser ekte interpolert midtanimasjonstilstand – ikke et hopp mellom nøkkelbildestopp – akkurat slik nettleseren faktisk vil gjengi den.
✓ Hver eiendom bor på sin egen bane med sine egne stopp, så et sprett, et fargeskift og en falming kan kjøres på samme element samtidig uten å kjempe mot hverandre.
✓ Fem ferdige forhåndsinnstillinger (bounce, shake, pulse, fade, slide-in) gir et fungerende utgangspunkt med ett klikk, så forblir hvert stopp fullt redigerbart derfra.

Brukssaker

  • • Dra scrub-spillehodet til et hvilket som helst punkt i en sprett- eller pulsanimasjon for å se den eksakte virkelige interpolerte midanimasjonstilstanden før du sender CSS.
  • • Legg et translateX-spor og et opasitetsspor sammen for å bygge en ekte slide-in-and-fade inngangsanimasjon, og kopier deretter hele @keyframes + animasjonsstenografien.
  • • Legg til et bakgrunnsfargespor ved siden av et skaleringsspor for å animere en knapps farge og størrelse sammen, og se RGB-kanalene blandes live mens du skrubber.