ชีตสรุป 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 ล้วน — ไม่ต้องสมัครและไม่มีการอัปโหลด