reactjs - React 感情 CSS - 値ではなく関数を返すテンプレート リテラル

Question

このコンポーネントに渡された props を使用して CSS をレンダリングし、このロジックを反応する感情で動作させようとしました。しかし、アニメーション CSS プロパティは無視されます。これは、値ではなく、アニメーション プロパティ文字列に対して関数が返されることを意味するためだと思います。

これに正しい構文を教えてくれる人はいますか?

import React from "react";
import { css } from "emotion";

const strike = keyframes`
  from{
    transform: scaleX(0)
  }
  to{
    transform : scaleX(1)
  }
`;

const todoStyle = css`
cursor: pointer;
  color: red;
  position: relative;
  display: inline-block;
  /* width: 200px; */
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    top: 50%;
    background: black;
    position: absolute;
    transform-origin: 0 50%;
    animation: ${strike} 0.3s ${props => (props.todo.complete === false ? " normal" : " reverse")};
  }
`;

// everything works except the animation property above is ignored

export default props => (
  <div className={todoStyle} onClick={props.toggleComplete}>
    {props.todo.text}
  </div>
);