Bagaimana cara memakainya?

Seret kedua pegangan, P1 dan P2, atau mulai dari sebuah preset. Tekan Mainkan untuk melihat gerakannya, lalu Jalankan untuk menambahkannya ke daftar.

Apa itu cubic-bezier?

Kurva yang menentukan bagaimana animasi mempercepat dan memperlambat. Bisa langsung dipakai pada timing-function di transition atau animation.

Tekan tombol salin pada kotak CSS, atau pada kurva tersimpan mana pun, dan aturan timing-function-nya masuk ke papan klip Anda.

Editor Easing CSS

Bentuk kurva kecepatan animasi secara visual lalu salin CSS cubic-bezier-nya.

Pratinjau

P1 X

P1 Y

P2 X

P2 Y

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Anda juga bisa menyeret pegangan P1 dan P2 untuk membentuknya sendiri.

Bentuk sebuah kurva, tekan Jalankan, dan hasilnya terkumpul di sini.