Animation component depends on theme styles

[miroslavstastny]

Bug Report

<Animation> depends on styles in a theme. That means that for Animation component to work in your custom theme, you need to copy & paste the Animation styles from Teams theme 💣

const spinner = {
  keyframe: {
    from: {
      transform: "rotate(0deg)"
    },
    to: {
      transform: "rotate(360deg)"
    }
  },
  duration: "5s",
  iterationCount: "infinite"
}

ReactDOM.render(
  <>
    <Provider theme={mergeThemes(themes.teams, { animations: { spinner } })}>
      <Animation name="spinner">
        <Box>spins</Box>
      </Animation>
    </Provider>
    <Provider theme={{ animations: { spinner } }}>
      <Animation name="spinner">
        <Box>should spin as well</Box>
      </Animation>
    </Provider>
  </>,
  document.getElementById("root")
)

Version

0.43.0

Testcase

https://codesandbox.io/s/animation-component-without-teams-5s1yj

[mnajdova]

Just for tracking, I've change the logic for generating the styles to be in the styles with this PR: https://github.com/microsoft/fluent-ui-react/pull/1377/files (previously it was inside the Animation component). Both of the approaches looks wrong, but I will try to think about a valid solution :\