Generator de animații CSS
Ajustați presetările de mișcare sau cadrele cheie și redați animația pentru a o verifica. Obțineți CSS pentru utilizare pe o pagină web și un exemplu de utilizare în HTML.
Ce puteți face
Ajustați mișcarea pornind de la o presetare
Alegeți dintre 12 tipuri, inclusiv intrări, ieșiri și rotație. Schimbați durata și repetarea după utilizare.
Editați și stările intermediare
Specificați deplasarea, rotația, scara și opacitatea pentru fiecare cadru cheie și verificați mișcarea generată.
Obțineți CSS și HTML
Copiați sau salvați CSS-ul de animație și un exemplu de utilizare HTML cu aceeași clasă.
Cum se folosește
Alegeți o presetare
Alegeți mișcarea dorită și setați durata pentru 1 redare. Selectarea altei presetări înlocuiește și orice setări pe care le-ați ajustat.
Ajustați doar părțile de care aveți nevoie
Deschideți detaliile de redare sau cadrele cheie pentru a schimba mișcarea intermediară, direcția, repetarea și alte setări.
Generați și redați
Verificați cu „Generează CSS și previzualizare”. Dacă modificați orice setare, generați din nou.
Obțineți CSS și HTML
Aplicați CSS-ul și adăugați clasa toollet-motion unui element HTML. Folosiți exemplul de utilizare HTML împreună cu CSS-ul.
Când este util
Creați o animație de intrare
Folosiți o presetare de estompare sau de intrare de jos pentru a ajusta mișcarea și viteza intrării.
Mișcare la interacțiunea cu un buton
Schimbați condiția de pornire la hover sau la focusul tastaturii pentru a crea o mișcare care răspunde la interacțiune.
Înțelegerea cadrelor cheie și a condițiilor de redare
Stări intermediare și durată
Procentul unui cadru cheie reprezintă poziția sa în 1 redare. Pentru o animație de 1 secundă, 50% este la 0,5 secunde. Curba de accelerație determină cum se schimbă valorile între cadrele cheie.
Deplasare, rotație și aspect
Poziția orizontală/verticală este deplasarea față de poziția inițială. O scară de 1 este dimensiunea inițială; o opacitate de 0 este transparent, iar 1 este opac.
Întârziere, repetare și direcție
Întârzierea se adaugă o singură dată înainte de începerea redării. Pentru redare finită, timpul total este întârziere + durata unei redări × numărul de repetări. Alternativ comută între direcțiile înainte și înapoi.
Stări înainte și după redare
Alegeți ce stare apare în timpul întârzierii și după încheierea redării. Setările inversare și alternativă schimbă pozițiile cadrelor cheie folosite la începutul și sfârșitul redării.
Setările de mișcare redusă
CSS-ul generat respectă setarea de mișcare redusă a dispozitivului dumneavoastră. Oprește animația și folosește starea finală determinată de direcția și numărul de repetări configurate. Pentru redarea infinită, folosește starea finală a primei redări.
Întrebări frecvente
Pot să o redau o singură dată?
Presetările standard încep cu 1 redare, iar pentru rotație și plutire repetarea continuă este activată de la început. Dezactivați „Repetă continuu” și setați numărul de repetări la 1.
Pe ce element aplic CSS-ul?
Adăugați clasa toollet-motion unui element HTML și folosiți-o împreună cu CSS-ul generat. Exemplul de utilizare HTML este un fragment cu un element button, nu o pagină web completă de sine stătătoare.
Câte cadre cheie pot crea?
Puteți avea între 2 și 8 cadre cheie, inclusiv începutul la 0% și sfârșitul la 100%. Adăugarea unui cadru cheie îl plasează la mijlocul celui mai larg interval. Începutul și sfârșitul nu pot fi șterse, iar pozițiile lor în % sunt fixe.
Previzualizarea a dispărut după ce am schimbat o setare.
Rezultatele sunt șterse la modificarea setărilor, astfel încât să nu folosiți accidental mișcarea sau codul din setările anterioare. Generați din nou pentru a verifica setările actuale.
De ce nu se mișcă previzualizarea?
Mișcarea se oprește când mișcarea redusă este activată pe dispozitivul dumneavoastră. Pentru setările de hover și focus, verificați și condițiile de pornire. Previzualizarea se pune în pauză când comutați la altă filă.
Pot folosi mai multe animații pe aceeași pagină?
Clasa generată și numele cadrelor cheie sunt partajate. Pentru a folosi animații separate, schimbați ambele nume pentru fiecare animație și reflectați aceste modificări în HTML-ul corespunzător.
Intrare și rezultate
- Setări
- 12 presetări, 2–8 cadre cheie și o durată de 0,2–60 de secunde.
- Redare
- O întârziere de 0–60 de secunde, 1–100 de repetări sau repetare infinită, curbă de accelerație, direcție, stări înainte și după redare și condiții de pornire.
- Ieșire
- CSS și un exemplu de utilizare HTML. Se definește doar mișcarea; nu se creează o pagină web completă sau un fișier video.