Apa itu cubic-bezier?

Kurva yang ditentukan oleh 4 nilai kontrol — digunakan oleh transisi dan animasi CSS untuk mengontrol laju perubahan dari waktu ke waktu. 'ease' browser adalah cubic-bezier(0.25, 0.1, 0.25, 1).

Ketika kurva easing melebihi 0 atau 1 (nilai y kontrol 1), animasi 'memantul' melewati titik akhirnya. Berguna untuk UI yang playful.

Apakah preset tersedia?

Ya — preset umum (linear, ease, ease-in, ease-out, ease-in-out) ditambah beberapa kurva kustom populer.

Apakah editor ini gratis?

Ya — sepenuhnya gratis, tanpa pendaftaran.

Warna & Desain

Editor Cubic Bezier

Editor cubic-bezier gratis. Desain kurva easing CSS secara visual dengan pegangan seret, prasetel, dan pratinjau animasi langsung. Salin CSS untuk transisi dan animasi.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Catatan editor

Understanding · Time, but with feeling.

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Warna & Desain