Angka Sebenarnya dibalik kemudahan masuk-keluar CSS
Rancang fungsi pengaturan waktu CSS kubik-bezier() khusus dengan menyeret dua titik kontrol, pratinjau langsung terhadap referensi linier, lalu salin nilai yang sudah siap.
Hasil
Halaman ini membuka generator kubik-bezier dengan x1=0.42, y1=0, x2=0.58, y2=1 sudah dimuat — titik kontrol yang tepat untuk memperluas kata kunci kemudahan masuk CSS. Seret salah satu pegangan, atau edit angka secara langsung, dan kurva, pratinjau animasi, dan string yang dapat disalin semuanya segera diperbarui.
ease-in-out adalah salah satu dari lima kata kunci pewaktuan CSS bawaan, dan ini populer justru karena kurva ini berakselerasi dengan lembut sejak awal, mempertahankan kecepatan yang cukup merata di tengah, dan turun kembali sebelum akhir — sebuah bentuk yang terlihat alami untuk sebagian besar gerakan UI. Melihatnya sebagai titik kontrol eksplisit dan bukan nama kata kunci memperjelas alasannya: y1 berada di dekat 0 dan y2 berada di dekat 1, keduanya dekat dengan x yang cocok, sehingga tidak ada overshoot di kedua arah.
Gunakan keempat angka ini sebagai titik awal, bukan kata kunci itu sendiri kapan pun Anda perlu sedikit menyentuhnya — tarik x1 ke bawah untuk memulai dengan lebih cepat, atau tekan y2 di atas 1 untuk mengubah bentuk yang sama menjadi overshoot yang lembut. Setiap perubahan memperbarui pratinjau dan baris kubik-bezier() yang dapat disalin secara instan.