title: Not able to style nested animations with keyframes with styled-components
body: <p>I am creating the animation for an Image with a customized animation in styled-component with conditional styling. But it gives me the error saying that</p>
  
  <blockquote>
    <p>"Uncaught Error: It seems you are interpolating a keyframe declaration
    (bZfjDs) into an untagged string. This was supported in
    styled-components v3, but is not longer supported in v4 as keyframes
    are now injected on-demand. Please wrap your string in the css``
    helper (see <a href="https://www.styled-components.com/docs/api#css" rel="noreferrer">https://www.styled-components.com/docs/api#css</a>), which
    ensures the styles are injected correctly."</p>
  </blockquote>
  
  <p>I did it with the v4 syntax but it still does not work. Is there a way to do it?</p>
  
  <p>I've tried follow the syntax but it still won't work.</p>
  
  <p>First I did:</p>
  
  <pre><code>animation: ${props =&gt; (props.animating === 'true' ? `${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;
  </code></pre>
  
  <p>where fadeInSlide is my own keyframes, then I tried doing:</p>
  
  <pre><code>const fadeInAnimation = css`
      animation: ${fadeInSlide} 1s ease-in-out infinite forwards;
    `
  const BlockImage = styled(Image)`
    animation: ${props =&gt; (props.animated === 'true' ? `${fadeInAnimation}` : '')} ;
  `
  </code></pre>
  
  <p>but this also gives me the error.</p>