Bagaimana cara membuat kurva easing cubic-bezier kustom untuk CSS?

Seret dua pegangan titik kontrol pada grafik, ketik nilai x1, y1, x2, y2 yang tepat, atau pilih preset. Kemudian pilih CSS di bawah Format output dan klik Salin untuk mendapatkan nilai cubic-bezier() untuk transition-timing-function.

Bagaimana cara membuat efek pantul atau overshoot dengan cubic-bezier?

Seret pegangan di atas atau di bawah kotak sehingga nilai Y-nya melewati 0-1. Y dapat melebihi rentang itu, sementara X tetap antara 0 dan 1. Preset back-out dan anticipate adalah titik awal overshoot siap pakai.

Bisakah saya mendapatkan easing untuk Tailwind, Framer Motion, atau anime.js?

Ya. Tab format output adalah CSS, Tailwind, Framer Motion, dan anime.js. Semuanya memformat empat angka yang sama, jadi pilih tab dan klik Salin untuk menempatkan potongan kode ke papan klip Anda.

Bagaimana cara memuat nilai cubic-bezier yang sudah ada untuk diedit?

Tempel nilai seperti cubic-bezier(.17, .67, .83, .67) ke dalam kotak impor dan klik Muat. Jika empat angka tidak dapat dibaca, Anda akan mendapatkan pesan kesalahan. Kurva juga disimpan di URL halaman setelah hash, sehingga dapat dibagikan.

Mengapa pratinjau terasa lebih lambat dari transisi asli saya?

Pratinjau gerak menggunakan pengaturan Durasi yang dapat Anda ubah, dan bawaan lebih lambat agar Anda dapat mempelajari kurva. Perpendek Durasi, lalu gunakan Putar Ulang untuk melihat gerakan pada kecepatan yang Anda rencanakan.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

📈

Generator Easing CSS Cubic-Bezier gratis

Rancang kurva easing CSS dengan menyeret titik kontrol, pratinjau gerakan langsung, dan salin nilai cubic-bezier(). Termasuk prasetel overshoot/bounce.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Berfungsi offline setelah dimuat

Seret pegangan biru kehijauan & merah muda untuk membentuk kurva

Titik kontrol

x1y1x2y2

Pratinjau gerak

Durasi1,6 dtk

Transisi lebar

Nilai CSS

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

Prasetel

Pegangan merah muda dan biru kehijauan dapat ditarik di atas atau di bawah kotak (Y melebihi 0-1) untuk membuat efek 'overshoot' / memantul seperti back-out dan anticipate. X tetap dalam 0-1 (waktu tidak bisa mundur).

Penggunaan umum

Transisi CSS Easing KustomDesain easing yang terasa alami untuk efek hover, menu, dan transisi UI.
Animasi Pantulan dan OvershootBuat gerakan pegas/pantulan yang menyenangkan dengan menarik titik kontrol melampaui kotak.
Easing untuk Animasi @keyframesPilih animation-timing-function yang tepat untuk animasi keyframe CSS.
Nilai Easing untuk Perpustakaan Animasi JSDapatkan nilai cubic-bezier untuk GSAP, Framer Motion, anime.js, dan banyak lagi.
Pahami Cara Kerja EasingLihat hubungan antara kurva bezier dan gerakan yang dihasilkannya.

Cara kerja

Editor ini dibangun sepenuhnya di browser menggunakan React state dan SVG — tidak ada library yang menangani matematika kurva. Dua titik kontrol yang dapat diseret mendefinisikan jalur Bezier kubik SVG, dan mesin animasi CSS browser sendiri menjalankan pratinjau gerakan dengan menyuntikkan nilai cubic-bezier() yang dihasilkan langsung ke dalam aturan @keyframes.

1
Seret atau ketik titik kontrol
Dua pegangan (P1 berwarna biru kehijauan, P2 berwarna merah muda) berada pada kanvas SVG. Menyeret menggunakan Pointer Events API dengan setPointerCapture sehingga pegangan mengikuti jari atau kursor Anda bahkan di luar batas SVG. Anda juga bisa menggeser pegangan dengan tombol panah atau mengetik nilai yang tepat ke input angka x1/y1/x2/y2.
2
SVG menggambar kurva secara real time
Kurva adalah satu elemen SVG <path> yang perintah C (Bezier kubik)-nya dihitung ulang dari empat koordinat titik kontrol setiap pembaruan state. Tanpa canvas, tanpa library eksternal — perender SVG browser menggambar jalur secara langsung.
3
Mesin CSS browser menampilkan pratinjau easing
Tiga animasi langsung (titik yang meluncur, transisi lebar, dan skala) menjalankan @keyframes CSS dengan nilai cubic-bezier() disuntikkan inline. Mesin animasi browser sendiri menafsirkan kurva, sehingga apa yang Anda lihat persis sama dengan yang akan dihasilkan CSS produksi Anda.
4
Salin cuplikan dalam sintaks framework Anda
Tab memformat keempat angka yang sama sebagai transition-timing-function CSS, kelas nilai-sembarang Tailwind, array ease Framer Motion, atau string easing anime.js. Cuplikan ditulis ke clipboard dengan navigator.clipboard. Kurva juga dikodekan dalam hash URL (#b=x1,y1,x2,y2) sehingga Anda bisa membagikan atau menandainya.