Generator Animasi Bingkai Utama CSS

Aturan CSS @keyframes sebenarnya adalah garis waktu yang kecil: sekumpulan pos pemeriksaan persentase, masing-masing menyatakan seperti apa tampilan properti pada saat itu juga, dengan browser menginterpolasi semua yang ada di antaranya. Membangun satu dengan tangan berarti menyimpan beberapa pos pemeriksaan persentase ini di kepala Anda sekaligus di beberapa properti — generator ini mengubah garis waktu tersebut menjadi sesuatu yang benar-benar dapat Anda lihat dan seret: satu jalur horizontal per properti, dengan penanda berhenti di setiap pos pemeriksaan.

Bagian tengahnya adalah scrub playhead. Seret ke titik mana pun antara 0% dan 100% dan kotak pratinjau melompat ke keadaan gabungan yang tepat pada saat itu juga — bukan bingkai utama terdekat, namun nilai interpolasi linier nyata yang dihitung antara dua pemberhentian mana pun yang mengelilingi playhead di setiap trek aktif. Properti numerik seperti posisi, rotasi, dan skala diinterpolasi sebagai bilangan biasa; background-color menginterpolasi setiap saluran merah, hijau, dan biru secara terpisah, yang membuat jalur warna memudar dengan mulus melalui rona perantara alih-alih berpindah di antara warna yang sebenarnya Anda tetapkan.

Beberapa track digabungkan secara otomatis menjadi satu animasi yang koheren: setiap properti berbasis transformasi (pindahkan, putar, skala) digabungkan menjadi satu deklarasi transformasi pada setiap persentase keyframe, sementara opasitas dan warna latar tetap pada barisnya masing-masing, persis seperti tampilan CSS tulisan tangan asli. Persentase ketika trek tertentu tidak memiliki perhentian eksplisit sengaja diabaikan dalam deklarasi properti — interpolasi bingkai utama browser mengisi celah antara perhentian mana pun yang ada, sama seperti aturan @keyframes yang Anda ketikkan dengan tangan.

Lima preset — bouncing, shake, pulse, fade, dan slide-in — memuat garis waktu yang lengkap dan siap untuk diubah (termasuk durasi yang masuk akal, fungsi pengaturan waktu, dan jumlah pengulangan) dalam satu klik. Tekan Mainkan kapan saja untuk melihat animasi CSS sebenarnya dijalankan pada elemen pratinjau, dihasilkan dengan cepat melalui stylesheet yang disuntikkan secara dinamis, lalu salin blok @keyframes lengkap ditambah singkatan .animated-element { animation: ... } langsung ke proyek Anda sendiri. Seperti setiap alat di situs ini, semuanya berjalan secara lokal di browser tanpa ada yang diunggah.