Pembuat Kurva Cubic Bezier CSS

Apa yang pembuat cubic-bezier ini lakukan

Mengubah empat angka titik kontrol menjadi fungsi timing CSS cubic-bezier(x1, y1, x2, y2) yang siap ditempel — nilai yang sama yang Anda kirim ke transition-timing-function atau animation-timing-function — dan menggambar kurva tepat yang digambarkan angka-angka tersebut, sehingga Anda dapat melihat easing sebelum mengirimnya. Pilih satu dari 29 preset bernama (kata kunci standar ease/ease-in/ease-out/ease-in-out/linear, ditambah keluarga Sine, Quad, Cubic, Quart, Quint, Expo, Circ dan Back yang lebih lengkap yang dipopulerkan oleh easings.net dan digunakan di seluruh Material Design), atau beralih ke Custom dan atur X1/Y1/X2/Y2 Anda sendiri.

Cara menggunakannya

1. Pilih preset dari dropdown, atau pilih Custom.
2. Jika Anda memilih Custom, atur X1, Y1, X2 dan Y2. X1 dan X2 dihubungkan ke 0–1 (spesifikasi CSS memerlukan hal itu); Y1 dan Y2 dapat berupa angka apa pun.
3. Salin blok Kode CSS — mencakup deklarasi transition-timing-function/animation-timing-function dan contoh transition: yang dikerjakan pada durasi pilihan Anda.
4. Periksa pratinjau kurva dan tabel Detail Kurva, yang memberi tahu Anda apakah easing adalah kurva easing standar atau yang overshoot.

Apa sebenarnya yang dikontrol X1, Y1, X2, Y2?

Kurva cubic-bezier CSS selalu dimulai di (0, 0) dan berakhir di (1, 1) — kedua titik ini ditetapkan oleh spesifikasi dan tidak dapat dikonfigurasi. X1/Y1 dan X2/Y2 adalah dua titik kontrol yang menarik kurva di antara mereka, dengan cara yang sama seperti pegangan pada kurva bezier dalam alat gambar vektor. X mewakili kemajuan melalui durasi animasi (jadi harus tetap antara 0 dan 1 — nilai di luar rentang itu membuat seluruh cubic-bezier() menjadi CSS yang tidak valid, dan browser mengabaikannya). Y mewakili kemajuan melalui properti yang dianimasikan — dan diperbolehkan untuk turun di bawah 0 atau di atas 1.

Mengapa pratinjau kurva keluar dari kotak?

Kapan pun Y1 atau Y2 berada di luar 0–1, nilai yang dianimasikan secara singkat melampaui target atau menyelam kembali sebelum menetap — itulah yang tepat untuk kurva seperti ease-in-back (sedikit "wind-up" sebelum bergerak) atau ease-out-back (sedikit overshoot sebelum menetap). Ini sepenuhnya CSS yang valid, bukan kesalahan; kotak referensi putus-putus pratinjau hanya membuatnya terlihat. Kurva bezier kubik selalu tetap dalam bentuk yang dibentuk oleh keempat titiknya, jadi kapan pun Y1 dan Y2 berada di dalam 0–1 seluruh kurva dijamin juga — itulah kasus "kurva easing standar" yang dilaporkan tabel detail.

Apakah data saya pribadi?

Ya. Semuanya — membangun string CSS dan menggambar pratinjau SVG — berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah atau dicatat.