ตัวแก้ไขการผ่อนแรง Cubic-Bézier
ออกแบบเส้นโค้งการผ่อนแรง cubic-bezier ที่กำหนดเองด้วยตัวแก้ไขแบบลากได้และตัวอย่างแอนิเมชันสด
ลากที่จับทั้งสองเพื่อกำหนดรูปร่างเส้นโค้งการเคลื่อนไหว
transition-timing-function: —;
animation-timing-function: —;
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลด
เกี่ยวกับ ตัวแก้ไขการผ่อนแรง Cubic-Bézier
Cubic-Bézier Easing Editor ออกแบบฟังก์ชันจังหวะเวลาที่กำหนดเองสำหรับ CSS transitions และ animations ลากแฮนเดิลควบคุมสองตัวบนแคนวาสเส้นโค้ง แล้วค่า cubic-bezier(x1, y1, x2, y2) จะอัปเดตแบบสด ภาพตัวอย่างแอนิเมชันจะเล่น easing เทียบกับตัวอ้างอิงเชิงเส้นให้คุณรู้สึกถึงความแตกต่าง พร้อมระยะเวลาที่ปรับได้และเล่นซ้ำได้ทันที
พรีเซ็ตสิบแบบครอบคลุมคำศัพท์ทั่วไป ได้แก่ ease มาตรฐาน, ease-in, ease-out และ ease-in-out บวกกับเส้นโค้งที่แสดงออกอย่าง back และ anticipate ที่เกินขอบเขตปลายทาง และการไล่ระดับแบบ material-style คือ accelerate และ decelerate ใช้ตามที่เป็นหรือเป็นจุดเริ่มต้นเพื่อลากไปสู่รูปแบบของคุณเอง
คุณยังสามารถพิมพ์พิกัดจุดควบคุมที่แน่นอน กด randomize เพื่อหาแรงบันดาลใจ และคัดลอกค่า cubic-bezier() เปล่าๆ หรือกฎ CSS ที่พร้อมวางได้เลย ตัวแก้ไขทั้งหมดทำงานในเบราว์เซอร์ของคุณ
วิธีใช้ ตัวแก้ไขการผ่อนแรง Cubic-Bézier
- ลากแฮนเดิลสองตัวบนตัวแก้ไขเส้นโค้งเพื่อกำหนดรูปทรงของ easing
- คลิก Replay และเปรียบเทียบแอนิเมชันที่มี easing กับตัวอ้างอิงเชิงเส้น ปรับระยะเวลาหากจำเป็น
- ลองพรีเซ็ต ease, back, anticipate, material และอื่นๆ เพื่อเป็นจุดเริ่มต้นอย่างรวดเร็ว
- ปรับแต่งอย่างละเอียดด้วยช่องอินพุตจุดควบคุมแบบตัวเลขสำหรับค่าที่แน่นอน
- คัดลอกค่า cubic-bezier() หรือสนิปเพ็ต CSS ที่สมบูรณ์