Disable animations for users with reduced motion preferences

[joe-op]

Is your feature request related to a problem?

Motion animations in CSS are not disabled when the media query prefers-reduced-motion is true (i.e., the user has indicated at the OS or some other level that they want animations disabled). The invalid input indicator in "Try it out" in particular has a prominent shake effect.

Describe the solution you'd like

Animations such as "shake" are disabled when prefers-reduced-motion is true.

@media(prefers-reduced-motion) {
  .class-typically-animated {
    animation: none;
  }
}

Describe alternatives you've considered

The media query can be overridden after importing swagger-ui CSS, but this is fragile and the end user depends on the developer of the API to implement it.

Additional context

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion