Sări la conținut
TextArray1.87.0
Complet local

Generator de CSS keyframes

Convertiți pași percent;property:value într-un bloc @keyframes și declarația sa de animație.

Intrare
Ieșire
Instrumente conexe
Generator de gradient CSSInstrumente pentru dezvoltatori
Generator de CSS box-shadowInstrumente pentru dezvoltatori
Generator de grid CSSInstrumente pentru dezvoltatori
Diferența tastei i18nInstrumente pentru dezvoltatori
Convertor TOML în JSONInstrumente pentru dezvoltatori
SQL în JSONInstrumente pentru dezvoltatori
Generator de CSS keyframes
Inserați pași de keyframe ca percent;property:value — o linie per punct, cum ar fi 0;opacity:0 urmat de 100;opacity:1 — și acest instrument asamblează un bloc @keyframes complet plus declarația de scurtătură de animație corespunzătoare. Adăugați mai multe perechi property:value pe aceeași linie, separate prin puncte și virgule, pentru a anima mai mult de o proprietate la acel punct, și reutilizați un procent pe mai multe linii pentru a continua să adăugați proprietăți la el.
Alegeți o predicție — estompare, alunecare, pulsație, tremur sau săritură — pentru a sări peste scrierea manuală a pașilor și pentru a obține o animație gata cu toate opțiunile încă ajustabile, sau schimbați predicția la personalizat pentru a conduce fiecare punct din propria intrare. Opțiunile rămase formează declarația de scurtătură de animație: numele stabilește identificatorul împărțit de regula @keyframes și declarația de animație, durata și întârzierea sunt în secunde, și funcția de sincronizare acoperă fiecare cuvânt cheie standard plus o curbă cubic-bezier() personalizată pentru o formă de easing exactă. Setați animația pentru a se repeta de un număr fix de ori sau activați infinit, alegeți o direcție (normal, invers, alternativ, alternativ invers) și un mod de umplere pentru ceea ce se întâmplă înainte și după rulare, și activați opțiunea de prefix webkit pentru a emite și un bloc @-webkit-keyframes și o linie -webkit-animation pentru versiunile mai vechi de Safari și Android WebView.
Valorile procentuale în afara intervalului 0–100 sunt fixate în interval, "from" și "to" sunt acceptate ca aliasuri pentru 0 și 100, iar liniile goale sau malformate sunt ignorate în loc să rupă rezultatul. Totalul sub rezultat raportează câți pași de keyframe au fost generați și numărul exact de caractere.
Tot ceea ce funcționează local în browserul dvs. pe măsură ce scrieți — niciun dat CSS sau de animație nu este trimis vreodată la un server. Copiați rezultatul, descărcați-l ca fișier .txt, sau trimiteti rezultatul înapoi în intrare pentru a continua să rafinați pașii.
FAQ
Cum arată de fapt formatul de intrare?
O linie per punct de keyframe: un procent, un punct și virgulă, apoi property:value. Adăugați mai multe perechi property:value pe aceeași linie, fiecare separată printr-un punct și virgulă, pentru a anima mai multe proprietăți simultan — de exemplu 50;opacity:0.5;transform:scale(1.1).
Ce se întâmplă când aleg o predicție ca estompare sau săritură?
Instrumentul utilizează un set încorporat de pași de keyframe pentru acea predicție și ignoră orice se găsește în caseta de intrare, în timp ce toate celelalte opțiuni — nume, durată, sincronizare, direcție și așa mai departe — se aplică în continuare. Comutați la personalizat pentru a utiliza din nou propria intrare.
Cum obțin o curbă de easing personalizată exactă?
Setați funcția de sincronizare la personalizat și introduceți patru numere separate prin virgule în câmpul cubic-bezier, cum ar fi 0.25, 0.1, 0.25, 1. O valoare nevalidă se încadrează la ease în loc să producă CSS rupt.
Care este diferența dintre numărul de iterații și infinit?
Numărul de iterații definește de câte ori se joacă animația înainte de a se opri. Activarea infinit anulează aceasta și repetă animația la infinit.
Datele mele de animație sunt încărcate oriunde?
Nu. Blocul @keyframes și declarația de animație sunt generate în întregime în browserul dvs. — nimic din ceea ce scrieți nu iese din dispozitivul dvs.