[CSS] prefers-reduced-motion

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

In English, you can use prefers-reduced-motion to remove animation.

Why should we do it?

For low end device, the animation may looks bad, therefore we can use prefers-reduced-motion to improve this case.

@media (prefers-reduced-motion: reduce) {
    .portal-transition {
        transition: transform 0.001s;
     }
}

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}