Generator Cubic Bezier

Mengetik cubic-bezier(x1, y1, x2, y2) secara manual dan memuat ulang halaman untuk memeriksa nuansanya adalah cara yang lambat untuk menyetel animasi. Generator ini menutup putaran itu: seret gagang titik kontrol mana pun pada kurva, atau ketik angka pasti ke bidang x1/y1/x2/y2, dan kurva, string CSS yang bisa disalin, serta pratinjau animasi langsung semuanya diperbarui setiap ada perubahan — tanpa langkah build, tanpa muat ulang.

Kedua sumbu bekerja berbeda secara sengaja. x1 dan x2 tetap terkunci antara 0 dan 1, karena itulah yang benar-benar disyaratkan spesifikasi CSS terhadap fungsi timing cubic-bezier() — nilai di luar rentang itu tidak valid. Untuk y1 dan y2 tidak ada batasan seperti itu: seret gagang ke atas melewati kotak atau ke bawah, dan kurva melampaui awal atau akhirnya, persis seperti bagaimana efek pegas dan pantulan dibuat dari sebuah kurva easing tunggal.

Melihat angka tidak sama dengan melihat gerakannya, jadi pratinjau menjalankan dua bola identik berdampingan secara berulang: satu bergerak menggunakan kurva kustom Anda, yang lain bergerak dengan laju linear konstan biasa. Menonton keduanya berpacu adalah cara tercepat untuk mengetahui apakah sebuah kurva easing benar-benar menghasilkan nuansa yang Anda inginkan, sebelum ia mencapai stylesheet. Halaman preset — angka riil di balik kata kunci ease-in-out CSS sendiri, sebuah aproksimasi overshoot jujur yang disebut sebagian orang pantulan, dan kurva standar Material Design terbitan Google — adalah titik awal siap pakai yang bisa Anda seret alih-alih titik kontrol kosong.

Semua berjalan secara lokal di browser Anda: tidak ada unggahan, tanpa akun, tanpa perjalanan pulang-pergi server, dan generator tetap bekerja offline setelah halaman dimuat.