• 视觉暂留作用
• 画面逐渐变化

• 愉悦的用户体验
• 引起用户注意
• 信息的反馈
• 掩饰加载过程

• transition 补间动画
• keyframe 关键帧动画
• 逐帧动画

只支持部分 css 属性支持列表，效果

局限性：

• 需要事件触发
• 一次性，不能重复
• 只能定义开始状态和结束状态
• 一条 transition 规则只能定义一个规则

.container {
  transition: all .3s ease-in-out;
}

• 可以自动播放
• 可以定义多个状态，相当于多个过渡动画

可以定义的规则有

• animation-direction：播放顺序normal | reverse | alternate | alternate-reverse（正常、反向、正反交替、反正交替）
• animation-fill-mode：动画停止状态none | forwards | backwards | both（不改变任何样式、保持最后一帧、保持第一帧、都执行一次）
• animation-iteration-count：播放次数infinite（无限循环）
• animation-play-state：播放状态running | paused（播放、暂停）不可简写在animation
• animation-delay：延迟播放

.container {
  animation: run 1s ease-in-out;
}
@keyframe run {
  0% {
    width: 100px;
  }
  100% {
    width: 300px;
  }
}

逐帧动画可以将animation-timing-function属性设置为steps(1)可以实现，达到去掉过渡动画的效果

• CSS 动画实现方式有几种
• 过渡动画和关键帧动画的区别
• 如何实现逐帧动画（使用关键帧动画，使用steps去掉过渡动画）
• 性能问题