Make use of the `prefers-reduced-motion` media query

Are there any plans to add support for the prefers-reduced-motion media query? Here is the CSS Tricks article about it.

Pretty much, if a user has set in their browser/system preferences they’d like reduce the amount of motion they see, we can know about.

What I’d purpose (if everyone thinks this is a good idea), is adjusting scss/mixins/_transition.scss to look more like:

@mixin transition($transition...) {
  @if $enable-transitions {
    @if length($transition) == 0 {
      transition: $transition-base;
    } @else {
      transition: $transition;
    }
    @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
    }
  }
}

[brianteeman]

@MikeRogers0 definite thumbs up from me - although its a AAA level issue in WCAG2.1 and currently only 100% supported on ios and safari that doesnt mean we shouldnt strive to make everything as accessible as possible.

I came up with a similar css change for Joomla https://github.com/joomla/joomla-cms/issues/19694 which is based on a non bootstrap one for Drupal https://www.drupal.org/project/drupal/issues/2940012

As I am not even remotely a css wizard I am sure whatever you propose will be much better and will get a big thumbs up from me.

[patrickhlauke]

Depends if @mdo and rest of the team feel it’s a worthwhile addition, but yes a PR is always nice 😃