خودتان امتحان کنید

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>تنظیمات برگزیده کاربر</h1>

<p dir="rtl">خاصیت مدیای prefers-reduced-motion به ما امکان می دهد تا بررسی کنیم که آیا یک کاربر درخواست حرکت کمتری برای انیمیشن ها یا transition ها داده است یا نه. با استفاده از این خاصیت می توانیم برای کاربرانی که این تنظیم را در رایانه ی خود فعال کرده اند، انیمیشن ها و transition ها را غیرفعال کنیم. </p>

</body>
</html>