CSS: use prefers-reduced-motion to let users skip animations (#85450)

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -6,7 +6,7 @@ import React, { useRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, useTheme2 } from '@grafana/ui';
+import { handleReducedMotion, useStyles2, useTheme2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { KioskMode } from 'app/types';
 
@@ -125,8 +125,10 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
 
 const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
   const commonTransition = {
-    transitionDuration: `${animationDuration}ms`,
-    transitionTimingFunction: theme.transitions.easing.easeInOut,
+    ...handleReducedMotion({
+      transitionDuration: `${animationDuration}ms`,
+      transitionTimingFunction: theme.transitions.easing.easeInOut,
+    }),
     [theme.breakpoints.down('md')]: {
       overflow: 'hidden',
     },

public/app/core/components/Login/LoginLayout.tsx

@@ -2,7 +2,7 @@ import { cx, css, keyframes } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { handleReducedMotion, useStyles2 } from '@grafana/ui';
 
 import { Branding } from '../Branding/Branding';
 import { BrandingSettings } from '../Branding/types';
@@ -174,7 +174,9 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
       transition: '0.25s ease',
     }),
     enterAnimation: css({
-      animation: `${flyInAnimation} ease-out 0.2s`,
+      ...handleReducedMotion({
+        animation: `${flyInAnimation} ease-out 0.2s`,
+      }),
     }),
   };
 };