cubic-bezier คืออะไร?

เส้นโค้งที่กำหนดด้วยค่าควบคุม 4 ค่า — ใช้โดย CSS transitions และ animations เพื่อควบคุมอัตราการเปลี่ยนแปลงเมื่อเวลาผ่านไป 'ease' ของเบราว์เซอร์คือ cubic-bezier(0.25, 0.1, 0.25, 1)

overshoot คืออะไร?

เมื่อเส้นโค้งของ easing เกิน 0 หรือ 1 (ค่า y ของการควบคุม 1) แอนิเมชันจะ 'กระเด้ง' เลยจากจุดสิ้นสุด มีประโยชน์สำหรับ UI ที่ดูสนุกสนาน

มีค่าที่ตั้งไว้ล่วงหน้าให้ใช้หรือไม่?

มี — ค่าที่ตั้งไว้ล่วงหน้าทั่วไป (linear, ease, ease-in, ease-out, ease-in-out) บวกกับเส้นโค้งแบบกำหนดเองยอดนิยมบางรายการ

เครื่องมือแก้ไขนี้ฟรีหรือไม่?

ฟรีทั้งหมด ไม่ต้องลงทะเบียน

สีและการออกแบบ

ตัวแก้ไข Cubic Bezier

ตัวแก้ไข cubic-bezier ฟรี ออกแบบเส้นโค้ง Easing ของ CSS ด้วยภาพโดยใช้ drag handle, ค่าที่ตั้งไว้ล่วงหน้า และการแสดงตัวอย่างแอนิเมชันแบบสด คัดลอก CSS สำหรับการเปลี่ยนผ่านและแอนิเมชัน

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);

หมายเหตุจากบรรณาธิการ

Understanding · Time, but with feeling.

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

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.

ผู้คนยังค้นหา

เครื่องมือที่เกี่ยวข้อง

More in this room.

ดูทั้งหมดใน สีและการออกแบบ