Using animation in styled components

Question

I am having one style which rotate the icon and apply some animation , the css works fine but when I convert the css into styled components it partially works , I debugged and found out something is wrong with animation property.

https://codesandbox.io/s/fragrant-firefly-dmck8d

Answer 1

Try this

export const StyledLoaderInner = styled.span`
    animation: ${StyledLoaderInnerFrame} 2s ease-in infinite,
    ${StyledLoaderMainKeyFrame} 2s ease infinite;
  background: hsla(0, 0%, 100%, 0.8);
  left: 0;
  position: absolute;
  right: 0;
`;