动画

Transition

在CSS3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

.box {
      width: 100px;
      height: 100px;
      background: rgb(178, 16, 16);
    }

    .box:hover {
      width: 150px;
      height: 150px;
      border-radius: 10px;
      background: rgb(17, 198, 201);
    }

Animation

.box {
      position: relative;
      width: 100px;
      height: 100px;
      background: rgb(178, 16, 16);
      animation: myKeyFrames 2s infinite;
    }

@keyframes myKeyFrames {
      from {
        top: 0;
        left: 0;
      }

      to {
        top: 100px;
        left: 100px;
      }
    }

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name: 指定关键帧名称
• duration: 指定动画指定需要多少秒或毫秒完成
• timing-function: 设置动画将如何完成一个周期 取值 linear 匀速 ease-in 加速 ease-out 减速 cubic-bezier函数
• delay: 设置动画在启动前的延迟间隔
• iteration-count 定义动画的播放次数 n 次数 infinite 无限次
• direction: normal 默认动画正常播放 reserve 动画反向播放 alternate 奇数次正向播放 偶数次反向播放 alternate-reverse 奇数次反向播放，偶数次正向播放
• fill-mode: 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
• play-state: 指定动画是否正在运行或已暂停。 paused 暂停 running 播放

requestAnimationFrame