Generator Animasi CSS Keyframe
Bangun animasi @keyframes sesungguhnya di lini masa multi-jalur — pos transform, opacity, dan background-color per jalur — dengan playhead yang bisa diseret yang menunjukkan kondisi pertengahan animasi yang terinterpolasi secara tepat.
🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.
Hasil
Aturan CSS @keyframes sebenarnya adalah lini masa kecil: serangkaian pos pemeriksaan persentase, masing-masing menyatakan seperti apa properti seharusnya terlihat pada momen itu, dengan browser menginterpolasi semua yang ada di antaranya. Membuatnya secara manual berarti harus menyimpan beberapa pos pemeriksaan persentase ini di kepala sekaligus untuk beberapa properti — generator ini mengubah lini masa itu menjadi sesuatu yang benar-benar bisa Anda lihat dan seret: satu jalur horizontal per properti, dengan penanda pos di setiap pos pemeriksaan.
Pusatnya adalah playhead gesek. Seret ke titik mana pun antara 0% dan 100% dan kotak pratinjau akan melompat ke kondisi gabungan yang tepat pada saat itu — bukan keyframe terdekat, melainkan nilai terinterpolasi linear yang sebenarnya yang dihitung antara dua pos mana pun yang mengelilingi playhead di setiap jalur aktif. Properti numerik seperti posisi, rotasi, dan skala terinterpolasi sebagai angka biasa; background-color menginterpolasi setiap kanal merah, hijau, dan biru secara independen, inilah yang membuat jalur warna pudar dengan mulus melalui warna perantara alih-alih melompat antara warna yang benar-benar Anda tetapkan.
Beberapa jalur bergabung secara otomatis menjadi satu animasi yang koheren: setiap properti berbasis transform (pindah, putar, skala) menyatu menjadi deklarasi transform tunggal di setiap persentase keyframe, sementara opacity dan background-color tetap di barisnya sendiri, persis seperti CSS tulisan tangan yang sesungguhnya akan terlihat. Persentase di mana jalur tertentu tidak memiliki pos eksplisit sengaja ditiadakan dari deklarasi properti itu — interpolasi keyframe bawaan browser mengisi celah di antara pos mana pun yang ada, sama seperti yang akan dilakukannya untuk aturan @keyframes apa pun yang Anda ketik manual.
Lima preset — pantul, goyang, denyut, pudar, dan geser-masuk — memuat lini masa lengkap yang siap diutak-atik (termasuk durasi, fungsi pewaktuan, dan hitungan pengulangan yang masuk akal) dalam satu klik. Tekan Play kapan saja untuk melihat animasi CSS yang sesungguhnya berjalan pada elemen pratinjau, dibuat langsung melalui stylesheet yang disuntikkan secara dinamis, lalu salin blok @keyframes lengkap plus singkatan .animated-element { animation: ... } langsung ke proyek Anda sendiri. Seperti setiap alat di situs ini, semuanya berjalan secara lokal di browser tanpa ada yang pernah diunggah.