CSS Easing Cheatsheet: คู่มือครบทุกเส้นโค้ง cubic-bezier และพรีเซ็ต transition สำเร็จรูป

ทุกครั้งที่ปุ่มเด้งเข้าที่อย่างแน่นหนา ลิ้นชักเลื่อนออกมาอย่างนุ่มนวล หรือการ์ดตกลงมาพร้อมแรงสปริงเล็ก ๆ สิ่งที่คุณกำลังดูอยู่จริง ๆ คือ animation timing function ที่กำลังทำหน้าที่ของมัน easing คืองานฝีมือที่มองไม่เห็นเบื้องหลัง transition ทุกตัวใน CSS มันเป็นตัวตัดสินว่าการเคลื่อนไหวจะรู้สึกคมกริบ หรูหรา สนุกสนาน หรือแปลกตา แต่นักพัฒนาส่วนใหญ่มักหยิบ keyword ease ตัวเดิม ๆ มาใช้ซ้ำ ๆ โดยไม่รู้เลยว่าเส้นโค้งที่เลือกถูกจะเพิ่มคาแรกเตอร์ให้งานได้มากแค่ไหน

CSS Easing Cheatsheet ถูกสร้างมาเพื่อแก้ปัญหานี้โดยเฉพาะ แทนที่จะต้องท่องจำตัวเลข cubic-bezier หรือเดาว่าเส้นโค้งจะหน้าตาเป็นอย่างไร คุณสามารถเลือกดู easing keyword กว่า 40 แบบ พร้อมพรีเซ็ตคัดสรรอย่าง snap, overshoot, anticipate และ glide ดูแต่ละตัวเล่นจริงบนพรีวิวแอนิเมชันสด แล้วคัดลอก transition declaration ที่พร้อมใช้งานไปวางใน stylesheet ได้ทันที

ในบทความนี้เราจะพาไปดูว่าเครื่องมือนี้ทำงานอย่างไร วิธีอ่านเส้นโค้ง cubic-bezier อย่างเข้าใจจริง และรูปแบบ easing แบบไหนที่เหมาะที่สุดสำหรับปุ่ม drawer UI เกม และสถานะการโหลด

ทำไมต้องใช้ CSS Easing Cheatsheet?

• เห็นทุกเส้นโค้งก่อนตัดสินใจใช้จริง กองตัวเลขอย่าง cubic-bezier(0.68, -0.55, 0.265, 1.55) เพียงอย่างเดียวไม่บอกอะไรเลย แต่พรีวิวแอนิเมชันสดจะแสดงให้เห็นว่าแต่ละเส้นโค้งเคลื่อนไหวอย่างไร ให้คุณตัดสินด้วยสายตาแทนจินตนาการ
• พรีเซ็ตคัดสรรสำเร็จรูป ไม่ต้องเดา เส้นโค้งที่คัดเลือกมาอย่าง snap, overshoot, anticipate และ glide มีชื่อบอกคาแรกเตอร์ชัดเจน ดีกว่าการไล่ถอดความหมายจากตัวเลข bezier ที่ไม่มีชื่อ
• รวม easing keyword กว่า 40 แบบไว้ในที่เดียว ตั้งแต่ linear ไปจนถึง ease-in-out ทุก keyword มาตรฐานถูกวางเคียงข้างเส้นโค้งแบบกำหนดเอง ให้เปรียบเทียบกันได้ทันที
• คัดลอก declaration ทั้งชุด ไม่ใช่แค่เศษโค้ด ทุกพรีเซ็ตมาพร้อม transition declaration ที่สมบูรณ์และใช้งานได้จริง ตัดปัญหาพิมพ์ผิดในค่า cubic-bezier ออกไป
• ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้ง ไม่มีขั้นตอน build เปิดเครื่องมือ เปรียบเทียบเส้นโค้ง คัดลอก แล้วกลับไปเขียนโค้ดต่อได้เลย
• คุณภาพที่ผู้ใช้รับรู้ดีขึ้นทันที การเคลื่อนไหวที่มี timing function เหมาะสมทำให้อินเทอร์เฟซเดิมดูดูแลมาอย่างดีและตอบสนองไวขึ้น และเครื่องมือนี้ทำให้การเลือกที่ถูกต้องเป็นเรื่องง่าย

ฟีเจอร์หลัก

รายละเอียดที่น่าสนใจเพิ่มเติม:

• พรีวิวจะเล่นวนต่อเนื่อง ทำให้ความต่างเล็ก ๆ ระหว่างเส้นโค้งสองเส้นที่คล้ายกันเห็นได้ชัด ซึ่งกราฟนิ่ง ๆ ไม่มีวันสื่อได้
• เนื่องจากพรีเซ็ตถูกนำเสนอเป็น declaration ทั้งชุด จึงไม่มีความเสี่ยงที่ตัวเลขพิมพ์ผิดจะเปลี่ยนแอนิเมชันของคุณไปเงียบ ๆ
• การตั้งชื่อที่เข้าใจง่ายช่วยสร้างภาษาร่วมให้ทีม บอกว่า "ใช้เส้นโค้ง glide กับ drawer" สื่อสารง่ายกว่าการอ่านสตริงพิกัดตัวเลขยาว ๆ

วิธีใช้งาน CSS Easing Cheatsheet

1. เลือกดูพรีเซ็ต เปิด cheatsheet แล้วเลื่อนดู easing keyword ที่มีชื่อและพรีเซ็ต cubic-bezier ที่คัดสรรไว้ ชื่ออย่าง snap, overshoot, anticipate และ glide จะบอกคาแรกเตอร์ของแต่ละเส้นโค้งได้ก่อนที่คุณจะกดดู
2. ดูพรีวิวแอนิเมชันสด ทุกรายการมีลูกบอลหรือกล่องเคลื่อนไหวสาธิตเส้นโค้งแบบเรียลไทม์ ปล่อยให้เล่นครบอย่างน้อยหนึ่งรอบ เพราะความต่างระหว่างเส้นโค้งที่อยู่ติดกันเห็นชัดกว่าในรูปแบบการเคลื่อนไหวจริงมากกว่าบนกระดาษ
3. เลือกเส้นโค้งให้ตรงกับเจตนา ถามตัวเองว่าองค์ประกอบนั้นควรรู้สึกอย่างไร รวดเร็วและมั่นใจ (snap) นุ่มนวลและไม่รีบ (glide) สนุกกับแรงสะท้อนที่มองเห็น (overshoot) หรือมีการเหวี่ยงย้อนเล็กน้อยก่อนเคลื่อนไหว (anticipate)
4. คัดลอก transition declaration หยิบ declaration ที่สมบูรณ์พร้อมวางของเส้นโค้งที่เลือก ไม่ต้องประกอบเศษโค้ดหรือพิมพ์ค่า bezier เอง
5. นำไปใช้กับ transition ของคุณ วาง declaration ลงใน CSS จับคู่กับ duration ที่เหมาะสม (ช่วง 150-300ms เป็นจุดเริ่มต้นที่ดีมาก) แล้วทดสอบในอินเทอร์เฟซจริง ถ้ารู้สึกอะไรไม่ลงตัว กลับไปที่ cheatsheet แล้วลองเส้นโค้งข้าง ๆ ดู

วิธีอ่านเส้นโค้ง Cubic-Bezier

ค่า cubic-bezier มีรูปแบบ cubic-bezier(x1, y1, x2, y2) และกำหนดจังหวะของ transition ด้วยตัวเลขสี่ตัว แกน x คือเวลาที่ไหลจาก 0 ถึง 1 ตลอดช่วงเวลาของแอนิเมชัน ส่วนแกน y คือความคืบหน้าของผลลัพธ์ หรือว่าคุณสมบัติที่กำลัง animate เดินทางไปไกลแค่ไหนเมื่อเทียบกับจุดหมาย เส้นโค้งจะเริ่มที่ (0, 0) และจบที่ (1, 1) เสมอ โดยจุดควบคุมทั้งสองจะทำหน้าที่ดัดเส้นทางระหว่างจุดปลายที่ตรึงไว้ทั้งสองข้าง

ค่า x ต้องอยู่ในช่วง 0-1 เพราะเวลาไม่สามารถย้อนกลับได้ แต่ค่า y ไม่มีข้อจำกัด และนั่นแหละคือแหล่งพลังในการสร้างสรรค์ ค่า y ที่มากกว่า 1 หมายถึงคุณสมบัติจะเดินทางผ่านจุดหมายไปชั่วขณะก่อนย้อนกลับมาเข้าที่ ซึ่งเป็นกลไกเบื้องหลังเอฟเฟกต์ overshoot ทุกแบบ ส่วนค่า y ที่น้อยกว่า 0 จะดึงคุณสมบัติไปทางตรงข้ามเล็กน้อยก่อน สร้างเป็นการเหวี่ยงย้อนที่เห็นในเส้นโค้ง anticipate

Keyword ที่มีชื่ออย่าง ease, ease-in, ease-out, ease-in-out และ linear ก็เป็นเพียงทางลัดสำหรับค่า cubic-bezier เฉพาะตัว linear คือ (0, 0, 1, 1) ความเร็วคงที่ เหมาะกับ spinner และการเฟดสี แต่มักไม่ใช่ทางเลือกที่ดีสำหรับการเคลื่อนที่ ease ค่าเริ่มต้นอยู่ที่ประมาณ (0.25, 0.1, 0.25, 1) cheatsheet วางทุกอย่างไว้รวมกันเพื่อให้คุณก้าวจาก keyword ไปสู่เส้นโค้งแบบกำหนดเองได้อย่างมั่นใจ

เรื่องนี้สำคัญเพราะ easing เปลี่ยนคุณภาพที่ผู้ใช้รับรู้ของ UI ได้มากกว่าการตัดสินใจด้าน motion เกือบทุกแบบ แอนิเมชันสองตัวที่เหมือนกันทุกอย่างแต่ใช้ timing function ต่างกัน จะให้ความรู้สึกถูกกะบ่งกับพรีเมียม หรือช้าและไว ต่างกันอย่างสิ้นเชิง transition 200ms ที่ใช้ ease-out แรง ๆ จะรู้สึกไวกว่า transition เดียวกันที่ใช้ linear อย่างเห็นได้ชัด เพราะสายตาเราสังเกตว่าการเคลื่อนไหว เริ่มต้น อย่างไร ไม่ใช่แค่ใช้เวลานานแค่ไหน

การจับคู่ duration ก็สำคัญพอ ๆ กับตัวเส้นโค้ง พรีเซ็ตแบบ snap เหมาะกับ 150-200ms เส้นโค้งสไตล์ glide ยืดได้ถึง 300-500ms ในการเคลื่อนที่ระยะไกลโดยไม่รู้สึกช้า ส่วนเส้นโค้ง overshoot มักต้องการเวลาเพิ่มอีกหน่อยราว 250-400ms เพื่อให้แรงสะท้อนมองเห็นได้จริง ถ้าแอนิเมชันรู้สึกผิด ๆ ให้ปรับ duration ก่อน ถ้ายังรู้สึกผิดอยู่ แสดงว่าตัวเส้นโค้งเป็นตัวปัญหา

ตัวอย่างการใช้งานจริง

ปุ่มและสถานะ hover ด้วย snap

ฟีดแบ็กแบบอินเทอร์แอกทีฟต้องการความรวดเร็ว เส้นโค้งสไตล์ snap ที่ใช้กับ transform หรือ box-shadow ให้การตอบสนองของปุ่มและการ์ดที่คมกริบและมั่นใจ ไม่มีการไหลเริ่มต้นที่เยิ้มยาว คุม duration ไว้ราว 150ms เพื่อให้ hover รู้สึกทันที และใช้ declaration เดียวกันกับทุกองค์ประกอบที่คลิกได้อย่างสม่ำเสมอ

Drawer เลื่อนเข้าด้วย glide

Navigation drawer แถบด้านข้าง และ bottom sheet เดินทางระยะไกล การใช้ snap ที่รุนแรงจะรู้สึกสะดุด พรีเซ็ตแบบ glide ที่มีการหน่วงช้าลงอย่างนุ่มนวลจะให้ความรู้สึกสงบและสมจริงกว่า จับคู่กับ 300-400ms และใช้เส้นโค้งกระจกสะท้อนสำหรับตอนออก เพื่อให้ drawer จากไปในลักษณะเดียวกับที่มา

UI เกมสนุก ๆ ด้วย overshoot

Score popup ป้ายรางวัล และแบนเนอร์เลื่อนเลเวล เป็นบ้านที่ใช่ที่สุดของเส้นโค้ง overshoot ซึ่งค่า y ที่มากกว่า 1 ทำให้องค์ประกอบพุ่งผ่านจุดหมายแล้วเด้งกลับ เส้นโค้ง anticipate เพิ่มการเหวี่ยงย้อนเล็กน้อยก่อนพุ่ง ตามหลักการแอนิเมชันคลาสสิกที่ทำให้ฟีดแบ็กของเกมรู้สึกมีชีวิต เพียงแต่เก็บเส้นโค้งพลังงานสูงเหล่านี้ไว้เป็นส่วนเสริม เพราะฟอร์มที่ overshoot ทุกครั้งที่พิมพ์กวนใจอย่างรวดเร็ว

Loading spinner และการเคลื่อนที่แบบ linear

Spinner เป็นกรณีเดียวที่ linear ชนะจริง ๆ องค์ประกอบที่หมุนควรครอบคลุมระยะทางเท่ากันในเวลาเท่ากัน และ easing อื่นจะทำให้การหมุนเต้นเป็นจังหวะ linear ยังเหมาะกับการเฟดสีและแถบความคืบหน้าแบบไม่ระบุด้วย สำหรับ loader สำเร็จรูปครบชุด สามารถใช้ cheatsheet นี้คู่กับเครื่องมือที่แนะนำไว้ท้ายบทความได้

แนวปฏิบัติที่ดีที่สุด

• ease-out สำหรับการเข้า ease-in สำหรับการออก องค์ประกอบที่มาถึงควรเริ่มไวแล้วค่อย ๆ เข้าที่ ส่วนองค์ประกอบที่จากไปควรเร่งออกไป ตามพฤติกรรมของวัตถุในโลกจริง
• คุม duration ไว้ในช่วง 150-300ms micro-interaction ที่ต่ำกว่า 150ms รู้สึกกระตุก และอะไรที่เกิน 500ms จะเริ่มถูกมองเป็นความหน่วงแทนความประณีต
• เคารพ prefers-reduced-motion ครอบแอนิเมชันตกแต่งด้วย @media (prefers-reduced-motion: reduce) แล้วเปลี่ยนการเคลื่อนที่ขนาดใหญ่เป็นการเฟดธรรมดา
• ความสม่ำเสมอในแอปเดียว เลือกสองถึงสามเส้นโค้ง ตั้งชื่อไว้ใน design token แล้วใช้ซ้ำทุกที่ คลัง easing สุ่มสี่สิบตัวดูวุ่นวาย แต่สามตัวที่คิดมาแล้วดูถูกออกแบบ
• สงวน overshoot ไว้เป็นส่วนเสริม motion แบบสปริงดึงดูดสายตา นั่นแหละคือเหตุผลที่ควรใช้กับรางวัลและการเฉลิมฉลอง ไม่ใช่การนำทางประจำวัน
• ปรับ duration กับเส้นโค้งไปพร้อมกัน เส้นโค้งที่ดีแต่ duration ผิดก็ยังรู้สึกพัง ดังนั้นปรับทั้งคู่เวลาขัดเกลาแอนิเมชัน

เลิกเดาว่า cubic-bezier(0.68, -0.55, 0.265, 1.55) หน้าตาเป็นอย่างไร เปิด CSS Easing Cheatsheet ดู easing keyword กว่า 40 แบบและพรีเซ็ตคัดสรรเล่นจริงบนพรีวิวแอนิเมชันสด แล้วคัดลอก transition declaration พร้อมใช้งานได้ในคลิกเดียว แอนิเมชันถัดไปของคุณจะรู้สึกตั้งใจออกแบบภายในไม่กี่วินาที

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• CSS Animation Generator - สร้าง keyframe animation ครบชุดพร้อม timing แบบกำหนดเอง
• CSS Spinner Generator - สร้าง loading spinner ได้ทุกสไตล์
• CSS Starting Style Generator - ทำ transition ตอนเข้าฉากให้ลื่นไหลด้วย @starting-style

ขอให้สนุกกับการทำแอนิเมชัน!

คำถามที่พบบ่อย

ถ: easing keyword ที่มีชื่อกับค่า cubic-bezier ต่างกันอย่างไร? ตอบ: keyword ที่มีชื่ออย่าง ease, ease-in-out และ linear เป็นทางลดที่ถูกกำหนดไว้ล่วงหน้าและแมปกับค่า cubic-bezier เฉพาะตัว ส่วนเส้นโค้ง cubic-bezier แบบกำหนดเองช่วยให้ปรับจังหวะได้ละเอียด และค่า y ที่อยู่นอกช่วง 0-1 จะปลดล็อกเอฟเฟกต์ overshoot และการเหวี่ยงย้อนที่ไม่มี keyword ใดทำได้

ถ: ค่า y ของ cubic-bezier สามารถมากกว่า 1 หรือน้อยกว่า 0 ได้หรือไม่? ตอบ: ได้ มีเพียงค่า x เท่านั้นที่ถูกล็อกอยู่ระหว่าง 0 ถึง 1 เพราะแทนเวลา ค่า y ที่มากกว่า 1 ทำให้องค์ประกอบเดินทางผ่านจุดหมายไปชั่วขณะ (overshoot) ส่วนค่า y ติดลบสร้างการเหวี่ยงย้อนเล็กน้อย (anticipate) ก่อนการเคลื่อนไหวจะเริ่มต้น

ถ: ควรจับคู่ easing กับ duration เท่าไรดี? ตอบ: สำหรับ transition ส่วนใหญ่ในอินเทอร์เฟซ ช่วง 150-300ms ใช้ได้ดี ระยะทางสั้นและสถานะ hover เหมาะกับปลายล่าง การเคลื่อนที่ระยะไกลอย่าง drawer เหมาะกับปลายบน และพรีเซ็ต overshoot มักต้องการเวลาเพิ่มอีกหน่อยเพื่อให้แรงสะท้อนมองเห็นได้

ถ: easing มีผลต่อประสิทธิภาพของแอนิเมชันหรือไม่? ตอบ: ตัว timing function เองแทบไม่กินทรัพยากรเลย สิ่งที่สำคัญคือ animate transform และ opacity แทนคุณสมบัติ layout อย่าง width หรือ top เมื่อใช้คุณสมบัติที่เป็นมิตรกับ GPU เส้นโค้งจาก cheatsheet ทุกเส้นจะลื่นที่ 60fps