⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Keyframe Animation Generator

Bygg verkliga @keyframes-animationer på en tidslinje med flera spår – transform, opacity och background-color-stopp per spår – med ett dragbart spelhuvud som visar det exakta interpolerade tillståndet mitt i animationen.

🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.

Klicka var som helst på ett spår för att lägga till ett stopp där. Dra ett stopp för att flytta det, eller redigera dess %- och värdefält under spåret. Dubbelklicka på ett stopp för att ta bort det (minst 2 per spår).

Bearbetar... 0%

Resultat

En CSS @keyframes-regel är egentligen en liten tidslinje: en uppsättning procentuella kontrollpunkter, där var och en deklarerar hur en egenskap ska se ut vid just det ögonblicket, och webbläsaren interpolerar allt däremellan. Att bygga en för hand innebär att hålla flera av dessa procentuella kontrollpunkter i huvudet samtidigt över flera egenskaper – den här generatorn gör om den tidslinjen till något du faktiskt kan se och dra i: ett horisontellt spår per egenskap, med en stoppmarkör vid varje kontrollpunkt.

Centralpunkten är skrubbnings-spelhuvudet. Dra det till valfri punkt mellan 0 % och 100 % så hoppar förhandsvisningsrutan till det exakta kombinerade tillståndet vid just det ögonblicket – inte den närmaste keyframen, utan ett verkligt linjärt interpolerat värde beräknat mellan de två stopp som omger spelhuvudet på varje aktivt spår. Numeriska egenskaper som position, rotation och skala interpoleras som vanliga tal; background-color interpolerar varje röd, grön och blå kanal oberoende, vilket gör att ett färgspår tonas mjukt genom mellanliggande nyanser istället för att hoppa mellan de färger du faktiskt angav.

Flera spår kombineras automatiskt till en sammanhängande animation: varje transformbaserad egenskap (flytta, rotera, skala) slås ihop till en enda transform-deklaration vid varje keyframe-procent, medan opacity och background-color stannar kvar på sina egna rader, precis som verklig handskriven CSS skulle se ut. Procenttal där ett givet spår inte har något explicit stopp utelämnas avsiktligt från den egenskapens deklarationer – webbläsarens egen keyframe-interpolering fyller gapet mellan de stopp som finns, på samma sätt som för vilken @keyframes-regel som helst du skrivit för hand.

Fem förinställningar – studs, skaka, puls, tona in och glid in – laddar en komplett, redigeringsklar tidslinje (inklusive en lämplig varaktighet, timingfunktion och upprepningsantal) med ett klick. Tryck på Spela när som helst för att se den verkliga CSS-animationen köras på förhandsvisningselementet, genererad i farten via en dynamiskt injicerad stilmall, och kopiera sedan hela @keyframes-blocket plus .animated-element { animation: ... } shorthand direkt till ditt eget projekt. Precis som alla verktyg på den här sajten körs allt lokalt i webbläsaren utan att något någonsin laddas upp.

Gillar du det här verktyget? Tror du att den här produkten är användbar? Ser du potential i det och vill stödja det?

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Tidslinje med flera spår för transform (translateX, translateY, rotate, scale), opacity och background-color, var och en med egna dragbara stopp.
  • Verklig linjär interpolering – numeriska egenskaper och per-kanal RGB för färger – driver scrub-förhandsvisningen mellan två godtyckliga stopp på ett spår.
  • En Spela-knapp applicerar den genererade @keyframes-CSS:en på förhandsvisningen via en dynamiskt injicerad stilmall, plus en kopierbar fullständig @keyframes + animation shorthand-utdata.

Viktiga fördelar

✓ Den dragbara spelhuvudet visar ett verkligt interpolerat tillstånd mitt i animationen – inte ett hopp mellan keyframes – precis som webbläsaren faktiskt renderar det.
✓ Varje egenskap bor på sitt eget spår med egna stopp, så en studs, en färgskiftning och en in- eller uttoning kan köras på samma element samtidigt utan att störa varandra.
✓ Fem färdiga förinställningar (studs, skaka, puls, tona in, glid in) ger en fungerande startpunkt med ett klick, och därefter är varje stopp fullt redigerbart.

Användningsfall

  • • Dra spelhuvudet till valfri punkt i en studs- eller pulseringsanimation för att se det exakta, interpolerade läget mitt i animationen innan du levererar CSS:en.
  • • Lägg ett translateX-spår och ett opacitetsspår ovanpå varandra för att bygga en riktig ingångsanimation som glider in och tonar fram, och kopiera sedan hela @keyframes + animation-shorthand.
  • • Lägg till ett background-color-spår bredvid ett skalningsspår för att animera en knapps färg och storlek samtidigt, och se hur RGB-kanalerna blandas i realtid medan du drar i spelhuvudet.