Make progress animation respect $enable-transitions and prefers-reduced-motion media query

[MartijnCuppens]

Fixes #25709

Prevent progress animation if transitions are disabled or reduce motion is enabled.
If $enable-transitions is false:

• @keyframes progress-bar-stripes and .progress-bar-animated are not rendered.

If reduced motion is enabled:

• The animation is disabled thanks to animation: none;

[MartijnCuppens]

The carousel fade was already fixed in a previous change to the carousel. Also, the .fade issue mentioned in #25709 seemed to be ok.

[andresgalante]

Do you think it's worth making the prefer reduce motion media querie global, somethink like:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

[MartijnCuppens]

Thought about that Andres, but this will override all transitions everywhere and that could lead to unexpected behaviour on custom code or css plugins. The animation is something we can't do because the spinners would freeze.

[MartijnCuppens]

@patrickhlauke, can you have a look if this looks fine to you?

[patrickhlauke]

in principle this looks fine. i'd note that reduced motion is primarily about stuff that can cause trouble (read: feelings of nausea etc) to users with vestibular disorders, so mainly animated scrolling effect, accordion-type panels that animate open/close, etc. i'm sure that some folks will argue that progress bar animations are fine and could be left on even when the preference is set...but i'd say let's put a stake in the ground and go with this, we can always selectively reenable it later.