动画定义

在 CSS3 中对动画的支持主要通过 @keyframes 来完成，Styled Components 提供了一个 keyframes 方法来支持局部 @keyframes 的定义。例如以下示例做了一个 360 度旋转的动画。

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

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 3s linear infinite;
`;

使用 keyframes 定义的关键帧只能使用在后续组件定义的样式中，而不是独立成为一个组件。