Previous Behavior

createSlideStyles generates CSS keyframes that are used in Popover, MenuPopover, and through them, about a dozen components.

export function createSlideStyles(mainAxis: number): GriffelStyle {
  const fadeIn = {
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
  };
  // slide keyframes
  ...

New Behavior

The opacity CSS keyframes are removed from createSlideStyles and replaced with a Fade motion component.

Testing Notes

• Use DevTools Animations inspector to run animations in slow motion.
• The enter transition should have a fade-in during the slide. Design chose the default variant of Fade.
• When the OS animations toggle is off, the slide should not happen, only the fade (matching current behavior).

Future Work

• There is currently no exit transition, as the popover disappears instantly, whereas Design would like it to fade out. But this PR is about refactoring the fade implementation without adding new motion.
• The slide CSS keyframes can be migrated to the motion framework, after we create a Slide motion component.

Related Issue(s)

• Fixes [Popover] Migrate createSlideStyles to Fade motion component #33422