เครื่องสร้าง Cubic Bezier

คู่มือ Cubic Bezier

cubic-bezier() คือฟังก์ชันจังหวะเวลาใน CSS ที่กำหนดว่าแอนิเมชันเร่งและลดความเร็วอย่างไร ค่าสี่ค่าของมัน — x1, y1, x2, y2 — คือจุดควบคุมสองจุดของเส้นโค้งที่แมปเวลากับความคืบหน้า แกน X แทนเวลา (0 ถึง 1) และแกน Y แทนความคืบหน้าของแอนิเมชัน

เลือกค่าที่ตั้งไว้หรือลากจุดควบคุมสีส้มบนผืนผ้าใบเพื่อสร้างเส้นโค้ง easing ของคุณ ลูกบอลเคลื่อนไหวแสดงความรู้สึกของจังหวะเวลาอย่างแม่นยำ และโค้ด CSS พร้อมวางลงใน transition หรือ animation ใดก็ได้

Pro Tips

• ค่า X ต้องอยู่ระหว่าง 0 ถึง 1 — ควบคุมจังหวะเวลา ค่า Y สามารถเกิน 0-1 เพื่อสร้างเอฟเฟกต์เด้งและถอยหลัง นี่คือหลักการของ ease-in-back
• สำหรับฟีดแบ็ก UI ควรให้แอนิเมชันต่ำกว่า 300ms พร้อม ease-out แอนิเมชันยาวที่มีเส้นโค้งหักศอกจะรู้สึกอืดอาดบนองค์ประกอบอินเทอร์เฟซ