条件关键帧无法正常工作，而其他属性则可以正常工作。例如动画无法正常工作，而字体大小却可以正常工作

Question

animation-name属性不起作用。

如果我将 animation-name：$ {bounce} 这一行放在条件之外，则效果很好。

字体大小属性可以正常工作，而动画名称则不能工作。 只是想根据条件添加多个动画。这只是正在发生的基本错误的示例代码。这是情感上的错误还是我犯了一个错误。

import styled from '@emotion/styled';
import { keyframes } from '@emotion/core'

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`;
const SomeDiv = styled.div`
  ${({showAnimation}) => "font-size: 20px;animation-name: ${bounce};"}
  color: blue;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
`;

render(
  <SomeDiv showAnimation={'yup'}>
    some bouncing text!
  </SomeDiv>
)