CSS Cubic Bezier Generator

Kurva berjalan dari kiri bawah (titik mulai) ke kanan atas (titik akhir), dengan waktu berjalan dari kiri ke kanan dan progres bergerak ke atas. Dua handle adalah titik kontrol yang melengkungkannya — masing-masing memiliki koordinat X dan Y, sehingga bersama-sama membentuk cubic-bezier(x1, y1, x2, y2). Nilai X harus selalu berada di antara 0 dan 1, sedangkan Y dapat melebihi batas atas atau batas bawah untuk membuat gerakan melampaui batas (overshoot) atau menarik kembali sebelum akhirnya berhenti.

Salin fungsi cubic-bezier() dan tempelkan di mana pun fungsi timing digunakan — seperti transition-timing-function, animation-timing-function, atau shorthand seperti transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kata kunci bawaan seperti ease, ease-in, ease-out, dan ease-in-out sebenarnya hanyalah kurva cubic-bezier yang nilainya sudah tetap, sehingga memilih preset tersebut akan menampilkan nilai asli di balik kata kunci tersebut.

Tidak secara langsung. Satu kurva cubic-bezier dapat membuat efek antisipasi dan overshoot (melewati batas) — preset "back" menarik salah satu handle melewati batas kotak untuk melakukan hal tersebut — tetapi kurva ini hanya bisa bergerak ke satu arah lalu berhenti. Efek memantul (bounce) atau elastis memerlukan perubahan arah beberapa kali, yang tidak bisa diekspresikan oleh satu fungsi cubic-bezier saja; efek tersebut membutuhkan CSS keyframes atau fungsi linear() dengan banyak stop.