v10 keyframe docs needs clarification on what you can and can't do

• emotion version: 10.0.1
• react version: 16.6.3

Relevant code.

const rotate = keyframes`
    to { transform: rotate(360deg); }
`;

const idleRotation = `${
   rotate
  } 0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`;

const AnimatedSvg = styled.svg`
  ${() => css`
    animation: ${idleRotation};
  `}
`;

What you did: This is a rather simplified example, in my full example, I’m combining/picking from multiple animations dynamically depending on the props passed in. This used to work in Emotion 9, but in Emotion 10 it doesn’t. animation: ${keyframesArray.join(',')}; Is there some trick in Emotion 10 that can help me?

I did try work around this by doing the following but that ended up inserting label:var-name into the css and breaking it.

const idleRotation = css`${
   rotate
  } 0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`;

What happened: https://codesandbox.io/s/v3nx68owp5

Problem description: Keyframes appear to not interpolate correctly except when directly being inserted into css or styled string blocks.

Suggested solution: Not sure what the solution is for this, it could just be an extra section in the docs outlining how to dynamically use keyframes.

[Andarist]

This should work:

const MyComponent = styled.div`
  ${({ visible }) => `

    // ... some style rules

    ${visible &&
      css`
       animation-iteration-count: 1;
       opacity: 1 !important;
       // animation: ${fadeOut} 10s;
     `}
   `
 }

It’s important to always wrap your string styles with css for various reasons:

• prettier formatting
• babel plugin optimization
• this issue with keyframes

[christianalfoni]

Oh? Are they not evaluated? The explains it… oh wait, I see where I am going wrong now. I am refactoring from styled.div (with styled components) to css prop. To get going I just changed out styled-components with emotion and everything worked out of the box, except our animations. Which I tried to reproduce poorly in the codesandbox.

I see what was missing now was using css on the returned value, which is not needed in styled-components… and I confused it all with CSS property. Sorry about that.

Updated Sandbox shows old code and what we had to change to, to get it running: https://codesandbox.io/s/43q0ky8o69