ฝึกโมชันบนการ์ด

โจทย์

เพิ่มโมชันให้อินเทอร์เฟซเล็ก ๆ โดยไม่ทำลายการเข้าถึง

สเปกที่ต้องครบ

• มี transition อย่างน้อยหนึ่งจุด (เช่นปุ่มหรือการ์ด)

• ใช้ transform และ/หรือ opacity เป็นหลัก

• มี @keyframes + animation อย่างน้อยหนึ่งอย่าง (เช่นเข้าหน้า)

• มีกฎรองรับ prefers-reduced-motion: reduce

• ไม่แอนิเมต width/height เป็นเอฟเฟกต์หลัก

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

ทำตามสเปกด้านบนบนหน้าเดโมสั้น ๆ
ปานกลาง
เปรียบเทียบแอนิเมต translate กับแอนิเมต top บนกล่องเดียวกัน — สังเกตความลื่น
ปานกลาง
ใส่ลูป infinite แล้วห่อด้วย no-preference หรือปิดตอน reduce
ยาก