Question 1

Apa itu fungsi cubic-bezier?

Accepted Answer

Fungsi cubic-bezier mendefinisikan kurva halus yang digunakan sebagai fungsi timing dalam animasi dan transisi CSS. Fungsi ini menerima empat parameter (x1, y1, x2, y2) yang mengontrol bentuk kurva.

Question 2

Apa yang dilakukan properti animation-timing-function?

Accepted Answer

Properti CSS animation-timing-function menentukan bagaimana animasi berkembang melalui setiap siklus. Properti ini mengontrol apakah animasi mempercepat, melambat, atau bergerak dengan kecepatan konstan.

Question 3

Apa perbedaan antara ease dan ease-in-out?

Accepted Answer

ease dimulai dengan cepat dan melambat menuju akhir. ease-in-out dimulai lambat, mempercepat di tengah, lalu melambat lagi di akhir, menciptakan nuansa yang lebih alami untuk sebagian besar animasi UI.

Question 4

Bisakah nilai y melampaui rentang 0 hingga 1?

Accepted Answer

Ya. Berbeda dengan nilai x yang harus tetap antara 0 dan 1, nilai y dapat melampaui rentang tersebut untuk menciptakan efek overshoot atau bounce.

Question 5

Bagaimana cara menerapkan fungsi timing yang dihasilkan ke animasi?

Accepted Answer

Salin CSS yang dihasilkan dan terapkan dengan animation-timing-function: cubic-bezier(x1, y1, x2, y2) atau transition-timing-function: cubic-bezier(x1, y1, x2, y2) di stylesheet Anda.

Generator Timing Animasi

Preset

Kustom

Pratinjau

Pertanyaan yang Sering Diajukan

Comments & Feedback