Penjana Animasi Kerangka Kunci CSS

Peraturan CSS @keyframes sebenarnya adalah garis masa yang kecil: satu set pusat pemeriksaan peratusan, setiap satu mengisytiharkan rupa harta benda pada masa yang tepat itu, dengan penyemak imbas menginterpolasi segala-galanya di antaranya. Membina satu dengan tangan bermakna menyimpan beberapa pusat pemeriksaan peratusan ini dalam kepala anda sekali gus merentas beberapa hartanah — penjana ini menukar garis masa itu kepada sesuatu yang sebenarnya anda boleh lihat dan seret: satu lorong mendatar bagi setiap hartanah, dengan penanda berhenti di setiap pusat pemeriksaan.

Bahagian tengah ialah kepala main gosok. Seret ia ke mana-mana titik antara 0% dan 100% dan kotak pratonton melompat ke keadaan gabungan yang tepat pada masa itu — bukan bingkai kunci terdekat, tetapi nilai interpolasi linear sebenar yang dikira antara mana-mana dua hentian mengelilingi kepala main pada setiap trek aktif. Sifat berangka seperti kedudukan, putaran dan skala interpolasi sebagai nombor biasa; warna latar belakang menginterpolasi setiap saluran merah, hijau dan biru secara bebas, itulah yang menjadikan trek warna pudar dengan lancar melalui rona perantaraan dan bukannya melompat antara warna yang sebenarnya anda tetapkan.

Berbilang runut digabungkan secara automatik menjadi satu animasi yang koheren: setiap sifat berasaskan transformasi (bergerak, putar, skala) bergabung menjadi satu pengisytiharan transformasi tunggal pada setiap peratusan bingkai utama, manakala kelegapan dan warna latar kekal pada baris mereka sendiri, sama seperti CSS tulisan tangan sebenar akan kelihatan. Peratusan di mana trek tertentu tidak mempunyai hentian eksplisit semata-mata ditinggalkan daripada pengisytiharan harta itu dengan sengaja — interpolasi kerangka utama penyemak imbas sendiri mengisi jurang antara mana-mana hentian yang wujud, dengan cara yang sama untuk mana-mana peraturan @keyframes yang anda taip dengan tangan.

Lima pratetap — lantun, goncang, nadi, pudar dan slaid masuk — muatkan garis masa yang lengkap dan sedia untuk tweak (termasuk tempoh yang wajar, fungsi pemasaan dan kiraan ulangan) dalam satu klik. Tekan Main pada bila-bila masa untuk melihat animasi CSS sebenar dijalankan pada elemen pratonton, dijana dengan cepat melalui lembaran gaya yang disuntik secara dinamik, kemudian salin blok @keyframes penuh serta .animated-element { animation: ... } trengkas terus ke dalam projek anda sendiri. Seperti setiap alat di laman web ini, semuanya berjalan secara setempat dalam penyemak imbas tanpa pernah dimuat naik.