title: With styled-components, how to use the longform css animation syntax to have multiple keyframed animations?
body: <p>So when an animation is created via the longform declaration and it has multiple specified names:</p>
  <pre><code>const animationNameCss = css`
      //insert keyframes here
  `
  
  let animatedImg = styled.img`
          animation-name: ${animationNameCss}, ${animationNameCss};
          animation-delay: 0, 200ms;
          animation-duration: 200ms;
          animation-timing-function: linear;
          animation-iteration-count: 1;
        `;
  </code></pre>
  <p>Only the first animation is performed. Is this related to concatenating tagged templates or simply not supported in styled-components? The intent is to create multiple animations that play back to back of 200ms each by concatenating animation-name and animation-delay.</p>
  <p>AnimationNameCss is dynamically set to one of 8 different keyframe sets in the real code.</p>