CSS keyframe generátor
Százalék;tulajdonság:érték lépéseket konvertál @keyframes blokkká és animációs rövidítésévé.
CSS keyframe generátor
Írjon be kulcsképkocka-lépéseket százalék;tulajdonság:érték formátumban — soronként egy megálló, például 0;opacity:0 majd 100;opacity:1 — és ez az eszköz egy teljes @keyframes blokkot és a megfelelõ animációs rövidítés-deklarációt állítja össze. Adjon hozzá több tulajdonság:érték párost ugyanahhoz a sorhoz, pontosvesszõvel elválasztva, hogy egynél több tulajdonságot animáljon ezen a megállón, és használja újra a százalékot több sor között, ha további tulajdonságokat akar hozzáadni.
Válasszon egy elõbeállítást — halványítás, csúsztatás, pulzálás, rázás vagy ugrálás — hogy ne kelljen kézzel lépéseket írnia, és készen lévõ animációt kapjon az összes lehetõséggel még állítható, vagy váltson az egyéni lehetõségre, hogy minden megállót a saját bemenetébõl vezéreljen. A többi lehetõség az animációs rövidítést alakítja: a név az azonosítót állítja be, amelyet a @keyframes szabály és az animáció-deklaráció használ, az időtartam és késleltetés másodpercben van, és az időzítési függvény minden szokásos kulcsszót lefed, valamint egy egyéni cubic-bezier() görbét egy pontos lezárási alakhoz. Állítsa az animációt egy meghatározott számú alkalommal való ismétlésre, vagy kapcsolja be a végtelent, válassza ki az irányt (normál, fordított, alternatív, alternatív-fordított) és a kitöltési módot arra, ami az elõtt és után történik, valamint kapcsolja be a webkit elõtag lehetõséget, hogy egy @-webkit-keyframes blokkot és egy -webkit-animation sort is kibocsásson a régebbi Safari és Android WebView verziók számára.
A 0–100 tartományon kívüli százalékértékeket a rendszer a tartományba szorítja, a "from" és "to" a 0 és 100 aliasaiként fogadható el, az üres vagy helytelenül formázott sorokat pedig kihagyják a kimenet megtörése helyett. Az eredmény alatt látható számlálóság azt jelzi, hány kulcsképkocka-megálló jött létre, és a pontos karakterszámot. Minden futás helyileg történik a böngészõben, ahogy gépel — a CSS vagy animációs adatok soha nem kerülnek szerverre. Másolja ki az eredményt, töltse le .txt fájlként, vagy küldje vissza a kimenetet a bemenetbe, ha tovább szeretné finomhangolni a lépéseket.