CSS-keyframes-generator
Konvertera percent;property:value-steg till ett @keyframes-block och dess animationsförkortning.
CSS-keyframes-generator
Ange keyframe-steg som percent;property:value — en rad per stopp, såsom 0;opacity:0 följt av 100;opacity:1 — och detta verktyg sammanställer ett komplett @keyframes-block tillsammans med motsvarande animationsförkortningsdeklaration. Lägg till flera property:value-par på samma rad, åtskilda av semikolon, för att animera mer än en egenskap vid det stoppet, och använd en procentsats på flera rader för att fortsätta lägga till egenskaper.
Välj en förinställning — fade, glid, puls, skaka eller studs — för att hoppa över att skriva steg för hand och få en färdig animering med alla fortfarande justerbara alternativ, eller byt förinställningen till anpassad för att styra varje stopp från din egen inmatning. De återstående alternativen formar animationsförkortningen: namn ställer in den identifierare som delas av @keyframes-regeln och animationsdeklarationen, varaktighet och fördröjning är i sekunder, och tidsfunktionen täcker alla standardnyckelord plus en anpassad cubic-bezier()-kurva för en exakt easing-form. Ställ in animationen för att upprepa ett fast antal gånger eller slå på oändligt, välj en riktning (normal, omvänd, växlande, växlande omvänd) och ett fyllningsläge för vad som händer före och efter den körs, och slå på webkit-prefixalternativet för att också generera ett @-webkit-keyframes-block och en -webkit-animation-rad för äldre Safari- och Android-WebView-versioner.
Procentvärden utanför 0–100 begränsas i intervallet, "from" och "to" accepteras som alias för 0 och 100, och tomma eller felaktigt formaterade rader hoppas över istället för att bryta utmatningen. Räknaren under utmatningen rapporterar hur många keyframe-stopp som genererades och det exakta antalet tecken.
Allt körs lokalt i din webbläsare när du skriver — ingen CSS- eller animationsdata skickas någonsin till en server. Kopiera resultatet, ladda ner det som en .txt-fil, eller skicka utmatningen tillbaka till inmatningen för att fortsätta förfina stegen.