CSS Visual ToolsLesson 86Preview gratis
Cubic Bezier Editor
Lesson ini bagian dari Web Developer Tools · Semua level
Ringkasan
Cubic bezier editor membantu merancang kurva timing function untuk transisi dan animasi CSS. Kamu mengatur dua titik kontrol sehingga gerakan bisa dipercepat, diperlambat, atau bahkan sedikit melewati nilai akhir. Kurva yang tepat membuat animasi terasa lebih alami dan sesuai karakter antarmuka.
Poin kunci
- cubic-bezier menerima empat nilai: x1, y1, x2, y2
- Nilai x harus berada antara 0 dan 1
- Nilai y boleh di luar 0-1 untuk efek overshoot
- cubic-bezier(0,0,1,1) setara dengan linear
- Kurva easing memengaruhi persepsi kecepatan, bukan durasi total
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.