ตัวเลขที่แท้จริงเบื้องหลังความง่ายเข้า-ออกของ CSS
ออกแบบฟังก์ชันการกำหนดเวลา CSS cube-bezier() แบบกำหนดเองโดยการลากจุดควบคุมสองจุด ดูตัวอย่างแบบสดเทียบกับการอ้างอิงเชิงเส้น จากนั้นคัดลอกค่าที่พร้อม
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างลูกบาศก์เบซิเยร์ด้วย x1=0.42, y1=0, x2=0.58, y2=1 ที่โหลดไว้แล้ว — จุดควบคุมที่แน่นอนที่คีย์เวิร์ด easy-in-out ของ CSS ขยายไปถึง ลากจุดจับหรือแก้ไขตัวเลขโดยตรง จากนั้นเส้นโค้ง การแสดงตัวอย่างภาพเคลื่อนไหว และสตริงที่คัดลอกได้ทั้งหมดจะอัปเดตทันที
การค่อยๆ เข้า-ออก เป็นหนึ่งในห้าคำหลักที่มีการกำหนดเวลา CSS ในตัว และได้รับความนิยมอย่างมากเนื่องจากเส้นโค้งนี้จะเร่งความเร็วอย่างนุ่มนวลตั้งแต่เริ่มต้น รักษาอัตราการก้าวที่ค่อนข้างสม่ำเสมอผ่านตรงกลาง และค่อยๆ ลดความเร็วลงก่อนที่จะสิ้นสุด ซึ่งเป็นรูปร่างที่อ่านได้อย่างเป็นธรรมชาติสำหรับการเคลื่อนไหวของ UI ส่วนใหญ่ การมองว่าเป็นจุดควบคุมที่ชัดเจนแทนที่จะเป็นชื่อคำหลักทำให้ชัดเจนว่าทำไม: y1 ตั้งอยู่ใกล้ 0 และ y2 อยู่ใกล้กับ 1 ซึ่งทั้งคู่ใกล้กับ x ที่ตรงกัน ดังนั้นจึงไม่มีการเกินเหตุในทิศทางใดทิศทางหนึ่ง
ใช้ตัวเลขสี่ตัวนี้เป็นจุดเริ่มต้นแทนที่จะเป็นคำหลักเมื่อใดก็ตามที่คุณต้องการปรับความรู้สึกเล็กน้อย — ดึง x1 ลงเพื่อเริ่มต้นที่ชัดเจนยิ่งขึ้น หรือกด y2 เหนือ 1 เพื่อเปลี่ยนรูปร่างเดียวกันนี้ให้กลายเป็นรูปแบบที่เกินขอบเขตเล็กน้อย ทุกการเปลี่ยนแปลงจะอัปเดตการแสดงตัวอย่างและบรรทัด cube-bezier() ที่สามารถคัดลอกได้ทันที