ชีตสรุป CSS Easing
เลือกดู keyword easing ของ CSS และพรีเซ็ต cubic-bezier ที่คัดสรร พร้อมอนิเมชันพรีวิวและ declaration ที่คัดลอกไปใช้ได้ทันที ฟรีและประมวลผลในเบราว์เซอร์
Loading tool...
ชีตสรุป CSS Easing คืออะไร?
CSS Easing Cheatsheet คือคลัง visual ของ transition timing function รวม keyword easing ของ CSS ทุกตัวพร้อมพรีเซ็ต cubic-bezier ที่ปรับแต่งไว้กว่าสามสิบแบบ — snap, overshoot, anticipate, glide — และเล่นอนิเมชันให้ดูทีละแบบ เพื่อเลือกฟีลการเคลื่อนไหวด้วยตาแทนการเดา
ประโยชน์หลัก
- เทียบเส้นโค้งพี่น้องในตระกูลเดียวกันแบบเห็นภาพทันที
- declaration คัดลอกวางได้ทั้งใน stylesheet ทั่วไปและ Tailwind arbitrary value
- ไม่ต้องคิดเลขก็ใช้เส้นโค้ง overshoot และฟีลสปริงได้ถูกต้อง
กรณีการใช้งาน
- •ปรับ micro-interaction อย่างปุ่ม toast และ modal ให้ลื่นขึ้น
- •เลือก motion language กลางสำหรับ design system
- •สอนหรือจัดทำเอกสารเรื่องจังหวะอนิเมชันให้ทีม
วิธีเลือกเส้นโค้ง easing ของ CSS
- ค้นหาหรือกรอง: พิมพ์ชื่อ easing เช่น "back" หรือเลือกตระกูลอย่าง Expo เพื่อกรองการ์ดพรีเซ็ตให้แคบลง
- ดูพรีวิวการเคลื่อนไหว: คลิกการ์ดพรีเซ็ตใดก็ได้เพื่อเลือก แล้วดูจุดเคลื่อนที่ด้วย timing function นั้น กดเล่นใหม่เพื่อดูซ้ำ
- คัดลอก declaration: คัดลอก declaration transition ที่เตรียมไว้ แล้ววางลง CSS ของ element ที่ต้องการอนิเมชัน
คุณสมบัติหลัก
- พรีเซ็ต easing พร้อมชื่อ 43 แบบในสิบตระกูล ตั้งแต่ keyword พื้นฐานถึง overshoot และ snap
- พรีวิวจุดเคลื่อนไหว เล่นซ้ำทันทีทุกครั้งที่เลือกเส้นโค้ง
- ค้นหาตามชื่อและกรองตามตระกูล easing เพื่อเทียบตัวใกล้เคียง
- คัดลอก declaration transition เต็มได้ในคลิกเดียว
- คลังอ้างอิงฝั่ง client ล้วน — ไม่ต้องสมัครและไม่มีการอัปโหลด
คำถามที่พบบ่อย
CSS easing function คืออะไร?
Easing function อธิบายว่าค่าที่ถูกอนิเมตเปลี่ยนแปลงตามเวลาอย่างไร ใน CSS กำหนดผ่าน property transition-timing-function หรือ animation-timing-function ด้วย keyword อย่าง ease-out หรือเส้นโค้ง cubic-bezier(x1, y1, x2, y2)
Easing แบบไหนเขียนเป็น cubic-bezier ไม่ได้?
เอฟเฟกต์เด้งจริง ๆ ที่กลับทิศหลายรอบ (bounce หรือ elastic คลาสสิก) ต้องใช้ CSS keyframes หรือ easing function แบบ linear() ทุกพรีเซ็ตใน cheatsheet นี้ถูกเลือกให้อยู่ในเส้นโค้ง cubic-bezier เดียว เพื่อใช้ declaration เดียวพอ
ทำให้ element เลยเป้าก่อนแล้วสะท้อนกลับทำอย่างไร?
ใช้เส้นโค้งตระกูล back เช่น cubic-bezier(0.34, 1.56, 0.64, 1) ค่า y ที่มากกว่า 1 จะดันอนิเมชันให้ไปเกินค่าปลายทางก่อนนิ่ง ทำให้ดูเด้งสนุกขึ้น
Cheatsheet นี้ฟรีจริงไหม?
ฟรี ทำงานในเบราว์เซอร์ล้วน ๆ ไม่ต้องสมัคร และ declaration ที่ได้เป็น CSS ธรรมดา ใช้ที่ไหนก็ได้รวมถึงงานเชิงพาณิชย์