Penjana Animasi Kerangka Utama CSS
Bina animasi @keyframes sebenar pada garis masa berbilang trek — hentian transform, opacity dan background-color setiap trek — dengan kepala main seret yang menunjukkan keadaan sebenar interpolasi tengah animasi.
🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.
Keputusan
Peraturan @keyframes CSS sebenarnya ialah garis masa kecil: satu set tanda peratusan, setiap satu menyatakan rupa sifat pada saat tepat itu, dengan pelayar menginterpolasi segala-galanya di antaranya. Membina satu secara manual bermakna menyimpan beberapa tanda peratusan ini dalam kepala anda serentak merentas beberapa sifat — penjana ini mengubah garis masa itu menjadi sesuatu yang anda benar-benar boleh lihat dan seret: satu lorong mendatar setiap sifat, dengan penanda henti di setiap pusat pemeriksaan.
Tumpuan utama ialah kepala main skrub. Seret ke mana-mana titik antara 0% dan 100% dan kotak pratonton melompat ke keadaan gabungan tepat pada saat itu — bukan kerangka utama terdekat, tetapi nilai interpolasi linear sebenar yang dikira antara mana-mana dua hentian yang mengelilingi kepala main pada setiap trek aktif. Sifat berangka seperti kedudukan, putaran dan skala menginterpolasi sebagai angka biasa; background-color menginterpolasi setiap saluran merah, hijau dan biru secara bebas, itulah yang membuatkan trek warna pudar dengan lancar melalui rona pertengahan dan bukannya melompat antara warna yang anda tetapkan.
Berbilang trek bergabung secara automatik menjadi satu animasi yang koheren: setiap sifat berasaskan transform (alih, putar, skala) bergabung menjadi satu pengisytiharan transform tunggal pada setiap peratusan kerangka utama, manakala opacity dan background-color kekal pada baris mereka sendiri, tepat seperti rupa CSS tulisan tangan sebenar. Peratusan di mana trek tertentu tidak mempunyai hentian eksplisit sengaja ditinggalkan daripada pengisytiharan sifat itu — interpolasi kerangka utama pelayar sendiri mengisi jurang antara mana-mana hentian yang wujud, sama seperti yang dilakukannya untuk mana-mana peraturan @keyframes yang anda taip secara manual.
Lima praset — lantun, goncang, denyut, pudar dan gelongsor masuk — memuatkan garis masa lengkap sedia untuk diubah suai (termasuk tempoh, fungsi pemasaan dan kiraan ulangan yang munasabah) dalam satu klik. Tekan Main pada bila-bila masa untuk melihat animasi CSS sebenar berjalan pada elemen pratonton, dijana secara langsung melalui helaian gaya yang disuntik secara dinamik, kemudian salin blok @keyframes penuh serta singkatan .animated-element { animation: ... } terus ke dalam projek anda. Seperti setiap alat di laman ini, semuanya berjalan secara setempat dalam pelayar tanpa apa-apa yang dimuat naik.