Условные ключевые кадры не работают, в то время как другие свойства работают нормально.Ex.анимация не работает, тогда как размер шрифта работает нормально - PullRequest
Новая
       8

Условные ключевые кадры не работают, в то время как другие свойства работают нормально.Ex.анимация не работает, тогда как размер шрифта работает нормально

0 голосов
/ 18 апреля 2019

Свойство animation-name не работает.

Если я поставлю строку animation-name: $ {bounce} вне условия, оно отлично работает.

Свойство font-size работает отлично, тогда как animation-name не работает.Просто хотел добавить несколько анимаций в зависимости от условий.Это просто пример кода базовой ошибки, которая происходит.Это ошибка эмоций или я допустил ошибку. 

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>
)
...