Describe the bug

Hey folks,

With scroll- and view-timeline animations around the corner, I think pausing all CSS animations is not a good default anymore. It can cause UI breakages on browsers that support these alternative timeline animations.

Currently preview-web injects the following styles into the page:

*, *:before, *:after {
    animation-delay: 0s !important;
    animation-direction: ${atEnd ? 'reverse' : 'normal'} !important;
    animation-play-state: paused !important;
    transition: none !important;
  }

Animation properties can cause UI breakages on browsers that support these alternative timeline animations and reduced motion preference is active.

For example

@keyframes to-transparent {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.container {
  animation-name: to-opaque;
  animation-timeline: --scrollTimeline;
  animation-fill-mode: both;
}

will cause .container to be permanently transparent in Storybook

Reproduction link

https://stackblitz.com/edit/github-izam92i6?file=src%2Fstories%2Fbutton.css

Reproduction steps

1. Go to the above link
2. Go to any of the button stories
3. Button will be invisible because it's scroll-timeline animation is jumped to the end.

System

any version

Additional context

I think we should either find a way to exclude view and scroll timeline animations or add a way to opt-out of this CSS