title: styled-components v4 syntax on animation css
body: <p>I recently upgraded my styled-components from v3 to v4. 
  The below css ${jquery} animation line would work on v3 but cannot seem to get it working on v4. </p>
  
  <pre><code>const StyledGlide = styled(Glide)`
      animation: ${ifProp("isOpen", `0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards`)};
  `
  </code></pre>
  
  <p>I get this error:
  <em>It seems you are interpolating a keyframe declaration (ifGrPa) into an untagged string. This was supported in styled-components v3, but is no longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly. See <a href="https://www.styled-components.com/docs/api#css" rel="nofollow noreferrer">https://www.styled-components.com/docs/api#css</a></em></p>
  
  <p>I tried changing the syntax but can't seem to get it right.</p>
  
  <pre><code>const StyledGlide = styled(Glide)`
      animation: ${ifProp("isOpen", css\`0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards\`)};
  `
  </code></pre>