Not able to style nested animations with keyframes with styled-components

Question

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

"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 https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly."

I did it with the v4 syntax but it still does not work. Is there a way to do it?

I've tried follow the syntax but it still won't work.

First I did:

animation: ${props => (props.animating === 'true' ? `${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;

where fadeInSlide is my own keyframes, then I tried doing:

const fadeInAnimation = css`
    animation: ${fadeInSlide} 1s ease-in-out infinite forwards;
  `
const BlockImage = styled(Image)`
  animation: ${props => (props.animated === 'true' ? `${fadeInAnimation}` : '')} ;
`

but this also gives me the error.

Answer 1

What worked for me was adding the css property. Perhaps this could help:

animation: ${props => (props.animating === 'true' ? css`${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;

Answer 2

Adding onto Gav's answer - your ternary operator may be incorrect. In JavaScript true is NOT equal to 'true'. You also may need to add a semicolon.

Try

animation: ${props => (props.animating === true ? css`${fadeInSlide} 1s ease-in-out infinite forwards;` : '')} ;

Or

animation: ${props => (props.animating ? css`${fadeInSlide} 1s ease-in-out infinite forwards;` : '')} ;