title: Key frames doesn't work in MUI styled components
body: <p>I'm trying to create infinity rotating for an image (img tag) using built in styled component implementation from MUI (before it was implemented on external library).</p>
  <p>Here is my fragment of code. If I'm running it I have an error.</p>
  <pre><code>export const SearchPreloaderContainerDiv = styled('div')({
    margin: '0 auto',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
  
    '&amp; h4': {
      margin: '50px 0 0 0',
      color: '#282828',
      fontFamily: 'Cuprum',
      fontStyle: 'normal',
      fontSize: '43px',
      lineHeight: '70px',
    },
  
    '@keyframes loader': {
      from: {
        transform: 'rotate(0deg)',
      },
      to: {
        transform: 'rotate(360deg)',
      },
    },
  
    '&amp; img': {
      padding: '20px',
      boxSizing: 'border-box',
      animation: 'loader linear 3s infinite',
    },
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/2g7Yy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2g7Yy.png" alt="enter image description here" /></a></p>
  <p>Before it was implemented using keyframes helper from external styled-componet library but now I can not find similar helper in MUI</p>