เครื่องมือสร้าง CSS Cubic Bezier
ลากแฮนเดิลสองข้างเพื่อปรับแต่งเส้นโค้งความเร็ว สังเกตการเคลื่อนที่ของจุดเปรียบเทียบกับความเร็วคงที่ และคัดลอกค่า cubic-bezier() ไปใช้งาน
cubic-bezier(0.25, 0.1, 0.25, 1)เส้นโค้งจะถูกวาดขึ้นในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
คำถามที่พบบ่อย
แฮนเดิลทั้งสองและตัวเลขทั้งสี่ตัวหมายถึงอะไร?
เส้นโค้งจะวิ่งจากล่างซ้าย (จุดเริ่มต้น) ไปยังบนขวา (จุดสิ้นสุด) โดยเวลาจะดำเนินจากซ้ายไปขวา และความคืบหน้าจะเคลื่อนที่ขึ้นด้านบน แฮนเดิลทั้งสองคือจุดควบคุมที่ดัดเส้นโค้ง ซึ่งแต่ละจุดจะมีค่า X และ Y รวมกันเป็น cubic-bezier(x1, y1, x2, y2) โดยค่า X จะอยู่ระหว่าง 0 ถึง 1 เสมอ ในขณะที่ค่า Y สามารถขึ้นไปเหนือขอบบนหรือลงไปใต้ขอบล่างเพื่อสร้างการเคลื่อนไหวที่เลยขอบเขต (Overshoot) หรือดึงกลับก่อนที่จะหยุดนิ่ง
จะนำค่านี้ไปใช้ใน CSS ได้อย่างไร?
คัดลอกค่า cubic-bezier() แล้วนำไปวางในส่วนที่กำหนดฟังก์ชันความเร็ว (Timing function) เช่น transition-timing-function, animation-timing-function หรือแบบย่อ เช่น transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) ทั้งนี้ คีย์เวิร์ดอย่าง ease, ease-in, ease-out และ ease-in-out เป็นเพียงเส้นโค้ง cubic-bezier ที่กำหนดค่าไว้ล่วงหน้า การเลือกพรีเซ็ตเหล่านี้จะแสดงค่าที่อยู่เบื้องหลังคีย์เวิร์ดดังกล่าวให้คุณเห็น
สามารถสร้างเอฟเฟกต์เด้งหรือยืดหยุ่นได้หรือไม่?
ไม่ได้ด้วยตัวมันเองเพียงอย่างเดียว cubic-bezier เดี่ยวสามารถสร้างเอฟเฟกต์ดึงกลับและเลยขอบเขตได้ (พรีเซ็ตกลุ่ม "back" จะดึงแฮนเดิลหนึ่งออกนอกกล่องเพื่อทำเช่นนั้น) แต่จะเคลื่อนที่ไปในทิศทางเดียวแล้วหยุดนิ่ง ส่วนเอฟเฟกต์เด้ง (Bounce) หรือยืดหยุ่น (Elastic) จะต้องมีการเปลี่ยนทิศทางกลับไปกลับมาหลายครั้ง ซึ่ง cubic-bezier เดี่ยวไม่สามารถอธิบายได้ เอฟเฟกต์เหล่านั้นจำเป็นต้องใช้ CSS keyframes หรือฟังก์ชัน linear() ที่มีจุดหยุดหลายจุดแทน