定义关键帧动画

关键帧动画是由Emotion中提供的keyframes函数提供的，keyframes的使用与css函数一样，即可以作为字符串模板标签使用，也可以作为函数使用。

使用keyframes函数定义关键帧动画，也同样可以与css一样使用字符串或者对象。以下是一个使用字符串定义弹跳的示例。

import { jsx, css, keyframes } from '@emotion/react';

const bouncing = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0, 0, 0);
  }
  40%, 30% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -40px, 0);
  }
`;

function App() {
  return (
    <div
      css={css`
        animation: ${bouncing} 1s ease infinite;
      `}>
      Bouncing text.
    </div>
  );
}