Konverter warna
Konversi HEX, RGB, dan HSL beserta transparansi, lihat contoh warna, dan salin nilai CSS.
Editor kurva cubic-bezier CSS
Atur dua titik kontrol, coba transisinya, dan buat fungsi easing cubic-bezier untuk CSS.
X dibatasi 0–1; Y boleh melewati rentang tersebut. Geser atau gunakan panah, dengan Shift untuk langkah lebih besar.
CSS
Tentang alat ini
Sesuaikan percepatan atau gerakan yang melewati tujuan dengan mengamati kurvanya.
Cara menggunakan
Pilih preset, seret titik kontrol atau masukkan X1, Y1, X2, Y2. Tombol panah juga dapat menggeser titik; Shift memperbesar langkah. Tentukan durasi pratinjau, putar atau hentikan gerakan, lalu salin atau unduh CSS.
Koordinat X dibatasi 0–1 dan Y −2–3, sehingga gerakan dapat mundur dahulu atau melampaui titik akhir. Ekspor hanya berisi deklarasi easing, tanpa durasi pratinjau atau animasi lengkap. Jika pengurangan gerakan diaktifkan pada sistem, pratinjau tidak bergerak, tetapi pengeditan dan ekspor tetap tersedia.
Pertanyaan umum
Apakah ekspor mencakup animasi lengkap?
Hanya transition-timing-function. Durasi dan properti yang dianimasikan diatur dalam stylesheet. x berkisar 0–1; y berkisar −2–3.
Mengapa tombol putar tidak menggerakkan pratinjau meskipun kurvanya valid?
Pratinjau mengikuti pengaturan pengurangan gerakan pada sistem. Jika aktif, animasi gerak tidak dimainkan, tetapi kurva tetap bisa disunting dan diekspor. Jika tidak aktif, periksa durasi pratinjau agar berada dalam rentang 100–5.000 ms. Durasi ini hanya untuk pratinjau dan tidak masuk ke kode ekspor.
Alat terkait
Dibuka di tab baru
Komentar
0