⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

Generator de animație de cadre cheie CSS

Creați animații reale @keyframes pe o cronologie cu mai multe piese — transformare, opacitate și opriri de culoare de fundal per piesă — cu un cap de redare care poate fi glisat care arată starea interpolată exactă a animației.

Faceți clic oriunde pe o bandă pentru a adăuga o oprire acolo. Trageți o oprire pentru a o muta sau editați-i câmpurile % și valoarea de sub bandă. Faceți dublu clic pe o oprire pentru a o elimina (minimum 2 pe pistă).

Procesare... 0%

Rezultat

O regulă CSS @keyframes este într-adevăr o linie temporală mică: un set de puncte de control procentuale, fiecare declarând cum ar trebui să arate o proprietate exact în acel moment, browserul interpolând totul între ele. A construi unul manual înseamnă să păstrați în cap mai multe dintre aceste puncte de control procentuale simultan pe mai multe proprietăți - acest generator transformă acea cronologie în ceva pe care îl puteți vedea și trage de fapt: o bandă orizontală per proprietate, cu un marcator de oprire la fiecare punct de control.

Piesa centrală este capul de joc scrub. Trageți-l în orice punct între 0% și 100% și caseta de previzualizare sare la starea combinată exactă în acel moment - nu cel mai apropiat cadru cheie, ci o valoare reală interpolată liniar calculată între cele două opriri care înconjoară capul de redare pe fiecare piesă activă. Proprietățile numerice precum poziția, rotația și scara se interpolează ca numere simple; culoarea de fundal interpolează fiecare canal roșu, verde și albastru în mod independent, ceea ce face ca o pistă de culoare să se estompeze fără probleme prin nuanțe intermediare în loc să sară între culorile pe care le setați de fapt.

Mai multe piese se combină automat într-o animație coerentă: fiecare proprietate bazată pe transformare (mutare, rotire, scalare) se îmbină într-o singură declarație de transformare la fiecare procent de cadru cheie, în timp ce opacitatea și culoarea de fundal rămân pe propriile linii, exact așa cum ar arăta CSS real scris de mână. Procentele în care o anumită pistă nu are o oprire explicită sunt pur și simplu lăsate în afara declarațiilor acelei proprietăți intenționat - interpolarea cadrelor cheie a browserului umple golul dintre orice oprire există, la fel cum ar face-o pentru orice regulă @keyframes pe care ați introdus-o manual.

Cinci presetări — bounce, shake, pulse, fade și slide-in — încarcă o cronologie completă, gata de ajustat (inclusiv o durată sensibilă, funcție de sincronizare și numărătoare de repetare) cu un singur clic. Apăsați Redare în orice moment pentru a vedea animația CSS reală rulată pe elementul de previzualizare, generată din mers printr-o foaie de stil injectată dinamic, apoi copiați blocul complet @keyframes plus prescurtarea .animated-element { animație: ... } direct în propriul proiect. Ca orice instrument de pe acest site, totul rulează local în browser, fără a încărca nimic.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Cronologie cu mai multe piste pentru transformare (translateX, translateY, rotire, scalare), opacitate și culoare de fundal, fiecare cu propriile opriri trasabile.
  • Interpolarea liniară reală - proprietăți numerice și RGB pe canal pentru culori - conduce previzualizarea scrub-ului între oricare două opriri de pe o pistă.
  • Un buton Redare aplică CSS-ul @keyframes generat efectiv previzualizării printr-o foaie de stil injectată dinamic, plus o ieșire completă copiabilă @keyframes + scurtă animație.

Beneficii cheie

✓ Capul de redare care poate fi glisat arată starea interpolată reală a animației la mijloc - nu un salt între opririle de cadru cheie - exact așa cum o va reda browserul.
✓ Fiecare proprietate trăiește pe propria sa pistă, cu propriile opriri, așa că o săritură, o schimbare de culoare și o decolorare pot rula simultan pe același element fără a se lupta între ele.
✓ Cinci presetări gata făcute (bounce, shake, pulse, fade, slide-in) oferă un punct de pornire de lucru cu un singur clic, apoi fiecare oprire rămâne complet editabilă de acolo.

Cazuri de utilizare

  • • Trageți capul de redare de frecare în orice punct al unei animații de respingere sau puls pentru a vedea starea interpolată reală exactă a animației din mijloc înainte de expedierea CSS-ului.
  • • Stratificați o pistă translateX și o pistă de opacitate împreună pentru a crea o animație reală de intrare cu glisare și estompare, apoi copiați întregul @keyframes + prescurtarea animației.
  • • Adăugați o pistă de culoare de fundal alături de o pistă de scară pentru a anima împreună culoarea și dimensiunea unui buton, urmărind cum se amestecă canalele RGB în timp ce frecați.