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

CSS Keyframe Animation Generator

Bygg riktiga @keyframes-animationer på en tidslinje med flera spår – transformation, opacitet och bakgrundsfärgstopp per spår – med ett dragbart spelhuvud som visar det exakta interpolerade tillståndet i mitten av animeringen.

Klicka var som helst på ett körfält 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 körfältet. 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, var och en deklarerar hur en egenskap ska se ut i det exakta ögonblicket, med webbläsaren som 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 fastigheter - den här generatorn förvandlar den tidslinjen till något du faktiskt kan se och dra: en horisontell körfält per fastighet, med en stoppmarkering vid varje kontrollpunkt.

Mittpunkten är scrub-spelhuvudet. Dra den till valfri punkt mellan 0 % och 100 % och förhandsgranskningsrutan hoppar till det exakta kombinerade tillståndet vid det ögonblicket - inte närmaste nyckelbildruta, utan ett riktigt 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; bakgrundsfärg interpolerar varje röd, grön och blå kanal oberoende, vilket är det som gör att ett färgspår bleknar smidigt genom mellanliggande nyanser istället för att hoppa mellan färgerna du faktiskt ställer in.

Flera spår kombineras automatiskt till en sammanhängande animering: varje transformeringsbaserad egenskap (flytta, rotera, skala) smälter samman till en enda transformeringsdeklaration vid varje nyckelbildsprocent, medan opacitet och bakgrundsfärg stannar på sina egna linjer, precis som riktig handskriven CSS skulle se ut. Procentandelar där ett givet spår inte har något explicit stopp utelämnas helt enkelt av egendomens deklarationer med avsikt – webbläsarens egen nyckelbildsinterpolation fyller gapet mellan vilka stopp som finns, på samma sätt som det skulle göra för alla @keyframes-regel som du skrev för hand.

Fem förinställningar – studsa, skaka, pulsera, tona in och glida in – laddar en komplett, färdig att justera tidslinje (inklusive en vettig varaktighet, timingfunktion och upprepning) med ett klick. Tryck på Spela när som helst för att se den riktiga CSS-animationen köras på förhandsgranskningselementet, genererad i farten genom en dynamiskt injicerad stilmall, kopiera sedan hela @keyframes-blocket plus .animated-elementet { animation: ... } förkortning direkt till ditt eget projekt. Som alla verktyg på den här webbplatsen körs allt lokalt i webbläsaren utan att något någonsin har laddats upp.

🛡️
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

  • Multi-track tidslinje för transformation (translateX, translateY, rotate, scale), opacitet och bakgrundsfärg, var och en med sina egna dragbara stopp.
  • Verklig linjär interpolation – numeriska egenskaper och RGB per kanal för färger – driver scrub-förhandsgranskningen mellan två valfria stopp på ett spår.
  • En Spela-knapp applicerar den faktiskt genererade @keyframes CSS till förhandsgranskningen via en dynamiskt injicerad stilmall, plus en kopierbar fullständig @keyframes + animerad stenografi.

Viktiga fördelar

✓ Det dragbara uppspelningshuvudet visar ett verkligt interpolerat tillstånd i mitten av animationen – inte ett hopp mellan keyframe-stoppen – precis som webbläsaren faktiskt kommer att rendera den.
✓ Varje fastighet bor på sin egen bana med sina egna hållplatser, så en studs, en färgskiftning och en blekning kan köras på samma element samtidigt utan att slåss mot varandra.
✓ Fem färdiga förinställningar (bounce, shake, pulse, fade, slide-in) ger en fungerande startpunkt med ett klick, sedan förblir varje stopp fullt redigerbart därifrån.

Användningsfall

  • • Dra scrub-spelhuvudet till valfri punkt i en studs- eller pulsanimering för att se det exakta verkliga interpolerade mittanimationsläget innan du skickar CSS.
  • • Lägg ihop ett translateX-spår och ett opacitetsspår för att bygga en riktig glid-in-och-fade-entréanimation, kopiera sedan hela @keyframes + animationsstenografin.
  • • Lägg till ett spår i bakgrundsfärg vid sidan av ett skalspår för att animera en knapps färg och storlek tillsammans, och se RGB-kanalerna blandas live medan du skrubbar.