Generator CSS keyframes
Pretvori korake percent;property:value v @keyframes blok in njeno skrajšano animacijo.
Generator CSS keyframes
Prilepite korake keyframe kot percent;property:value — ena vrstica na zaustavko, na primer 0;opacity:0 sledi 100;opacity:1 — in to orodje sestavi celoten @keyframes blok skupaj z ujemajoče skrajšano animacijsko izjavo. Dodajte več parov property:value na isto vrstico, ločene s podpičji, da animirate več kot eno lastnost na tej zaustavki, in ponovno uporabite odstotek na več vrsticah, da nadaljujete z dodajanjem lastnosti.
Izberite predlogo — fade, slide, pulse, shake ali bounce — da preskočite ročno pisanje korakov in dobite pripravljeno animacijo z vsemi možnostmi še vedno prilagodljive, ali preklopite predlogo na prilagođeno, da vozite vsako zaustavko iz lastnega vnosa. Preostale možnosti oblikujejo skrajšano animacijo: ime postavi identifikator, ki ga delita @keyframes pravilo in izjava animacije, trajanje in zamuda sta v sekundah, funkcija spreminjanja časa pa pokriva vsak standardni ključni termin plus prilagođeno cubic-bezier() krivuljo za natančno obliko pospešetja. Nastavite animacijo, da se ponavlja fiksno število krat ali vključite neskončno, izberite smer (normalno, obratno, izmenično, obratno izmenično) in način zapolnitve za to, kaj se zgodi pred in po njenem zagonu, in vključite možnost webkit predpone, da tudi oddajte @-webkit-keyframes blok in -webkit-animation vrstico za starejše različice Safarija in Android WebViewa.
Vrednosti odstotka zunaj 0–100 so stisnjene v obseg, "from" in "to" se sprejmejo kot psevdonimi za 0 in 100, prazne ali slabo oblikovane vrstice pa se preskočijo namesto da prekinejo izhod. Števec pod izhodom poroča, koliko zaustavk keyframe je bilo ustvarjeno, in natančno število znakov.
Vse se vrtit lokalno v vašem brskalniku med tipkanjem — podatki CSS ali animacije se nikoli ne pošljejo na strežnik. Kopirajte rezultat, prenesite ga kot datoteko .txt ali pošljite izhod nazaj v vnos, da nadaljujete s popolnjevanjem korakov.