prefers-reduced-motion

เคารพการตั้งค่าผู้ใช้

ระบบปฏิบัติการหลายตัวให้ผู้ใช้ขอ “ลดการเคลื่อนไหว” · ใน CSS ตรวจด้วย media feature นี้

/* แพทเทิร์นที่แนะนำ: มีโมชันเมื่อไม่ขอลด */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
เทคนิคทางเลือก: ใส่แอนิเมตเฉพาะภายใน (prefers-reduced-motion: no-preference) แทนการบังคับปิดทีหลัง — ทั้งสองแบบใช้ได้ ขอให้มีทางลด

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

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

เปิด Reduced Motion ใน OS/เบราว์เซอร์ แล้วรีโหลดเพจที่มีแอนิเมต — สังเกตผล
macOS: Accessibility → Display → Reduce motion
ปานกลาง
หน้าก่อนหน้า 7 / 14 หน้าถัดไป