【5毛特效】在等待过程中，如何用CSS3实现一个沙漏的动画效果

Animation

• animation-name 指定要绑定到选择器的关键帧的名称
• animation-duration 动画指定需要多少秒或毫秒完成
• animation-timing-function 设置动画将如何完成一个周期
• animation-delay 设置动画在启动前的延迟间隔。
• animation-iteration-count 定义动画的播放次数。
• animation-direction 指定是否应该轮流反向播放动画。
• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-play-state 指定动画是否正在运行或已暂停。
• initial 设置属性为其默认值。
• inherit 从父元素继承属性。
  

  <img src={img2} alt="" className={classes.insideIcon} />

 '@global': {
      '@keyframes turn': {
        '0%': {
          WebkitTransform: 'rotate(0deg)'
        },
        '25%': {
          WebkitTransform: 'rotate(180deg)'
        },
        '50%': {
          WebkitTransform: 'rotate(360deg)'
        },
        '75%': {
          WebkitTransform: 'rotate(180deg)'
        },
        '100%': {
          WebkitTransform: 'rotate(0deg)'
        }
      }
    },
    insideIcon: {
      width: theme.typography.pxToRem(22),
      height: theme.typography.pxToRem(30),
      marginTop: theme.typography.pxToRem(-108),
      animation: ' turn 4.0s ease-in-out infinite;'
    }