prefers-reduce-motion globally instead of duplicating it?

Created by: ffoodd

Af of v4.4.1 — and since #25249 (closed) — the transition() mixins unsets transition when user prefers-reduced-motion (which is great).

However there are at least two caveats with this way of unsetting transitions:

1. the whole media query is duplicated a lot (each time the mixin is used, 16 times in 4.4.1)
2. it's only done for this specific mixin, however there a few components using animations or transitions without using this mixin (progress bar, for example).

What would you think about reducing motion globally and drastically?

My main resource for this is Andy Bell's "Modern CSS reset" but there're a lot more resources out there.

Coupling with $enable-prefers-reduced-motion-media-query, it might look like this:

@if $enable-prefers-reduced-motion-media-query {
  @media (prefers-reduced-motion: reduce) {
    * {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

And it should be shorter and more efficient than 16 times of scoped transition: none. I guess it could be either in _transitions.scss or in _reboot.scss; both of them would make sense to me.

I don't know if / on which version it could be done, but I'd be pleased to make a PR if it does interest you.