Handytool
สำหรับนักพัฒนาฟรีทำงานในเครื่อง

Cubic-bezier editor

ออกแบบ CSS cubic-bezier easing curves ด้วยภาพ — ลาก handle, preview motion และ copy CSS

CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
ตัวอย่าง
Preset

ลากจุดสีเหลืองหรือใช้ sliders เพื่อปรับแต่งเส้นโค้ง

เกี่ยวกับ Cubic-bezier editor

Cubic-bezier editor ของ Handytool ให้คุณสร้าง CSS easing curve ด้วยวิธีที่พวกมันออกแบบมา — โดยการลาก two control point จนกว่า motion จะรู้สึกถูก เริ่มจาก familiar preset (ease, linear, ease-in-out) และ tweak จากที่นั่น หรือ freely move handle เพื่อคิดค้น curve ของคุณเอง Live ball animation ทำการ play back curve เพื่อให้คุณรู้สึกถึง timing ก่อน paste cubic-bezier(...) ลงใน transition ของคุณ

คุณสมบัติของ Cubic-bezier editor

  • 01

    Drag curve, see motion

    Two draggable handle ควบคุม start และ end ของ bezier Accompanying ball animation ทำ play curve ที่ duration ที่คุณเลือก เพื่อให้คุณสามารถ preview overshoot และ ease-out feel โดยไม่ออกจากหน้า

  • 02

    ทั้งหมด standard preset

    เริ่มจาก CSS's built-in ease, linear, ease-in, ease-out และ ease-in-out — แล้ว tweak Preset switch กลับเป็น "custom" โดยอัตโนมัติ เมื่อคุณ move handle

  • 03

    Copy CSS ด้วยคลิกเดียว

    Cubic-bezier() value อัปเดตแบบสดด้วย two-decimal precision พร้อมที่จะ drop ลงใน transition-timing-function หรือ animation-timing-function

คำถามที่พบบ่อยของ Cubic-bezier editor

ทำไม Y value จึงสามารถไปข้างบน 1 หรือข้างล่าง 0?
Bezier control point นอก 0–1 range สร้าง overshoot และ undershoot effect — curve ไป past endpoint ของมันก่อน settling นี่คือวิธีที่ "bouncy" easing curve ถูกสร้าง; X axis ยัง force ไว้ใน 0–1
ฉันจะใช้ output ได้อย่างไร?
Copy cubic-bezier(...) string และ paste มันลงใน any CSS transition-timing-function หรือ animation-timing-function value มันทำงานในทุก modern browser
Preview accurate กับสิ่งที่ CSS จะทำหรือไม่?
ใช่ — preview animate ball จาก 0 ไป 100% โดยใช้ cubic bezier formula เดียวกันที่ browser ใช้สำหรับ transition Duration slider ให้คุณรู้สึกถึง slow vs fast curve ก่อน committing
Ease-in-out จริงๆ หมายความว่าอะไร?
Ease-in-out เริ่ม slow, speed up ตรงกลาง และ slow down อีกครั้งที่ส่วนท้าย — cubic-bezier(0.42, 0, 0.58, 1) curve มันเป็น default สำหรับ motion UI ส่วนใหญ่เพราะมันสะท้อน how real physical object accelerate และ decelerate

คู่มือ

บทความ →

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

สำหรับนักพัฒนา →

สำรวจเครื่องมืออื่น ๆ

เครื่องมือทั้งหมด →