آموزش استایل: انیمیشن جذاب و دسترس‌پذیر با prefers-reduced-motion

حرکت ظریف می‌تواند رابط را جذاب کند، اما بعضی کاربران کاهش انیمیشن را ترجیح می‌دهند.

رسانه CSS با نام prefers-reduced-motion ترجیح ثبت‌شده کاربر را تشخیص می‌دهد.

حرکت کارت را با کلاس مشخصی مثل promo-card محدود کن تا کل سایت تحت تأثیر قرار نگیرد.

در حالت عادی می‌توانی گذار کوتاه تعریف کنی: .promo-card { transition: transform .2s; }

برای حالت اشاره‌گر بنویس: .promo-card:hover { transform: translateY(-4px); }

حالت کاهش حرکت: @media (prefers-reduced-motion: reduce) { .promo-card { transition: none; animation: none; } }

در همان قانون اضافه کن: .promo-card:hover { transform: none; } تا جابه‌جایی هم حذف شود.

حذف حرکت نباید دکمه یا محتوایی را پنهان کند؛ نشانه رنگی یا کادر ثابت را حفظ کن.

با فعال‌کردن Reduce Motion در دستگاه یا شبیه‌سازی مرورگر، هر دو حالت را امتحان کن.

این روش ظاهر حرفه‌ای را با احترام به ترجیح کاربر ترکیب می‌کند و به کتابخانه خارجی نیاز ندارد.

منابع رسمی — بررسی: ۱۳ مهر ۱۴۰۵ / ۵ اکتبر ۲۰۲۶

اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.

آموزش‌های مرتبط