加载过程

    • transition 补间动画 （开头和结尾，补中间部分）
      • transition-delay
      • transition-duration
      • transition-timing-function（可加贝塞尔曲线）
    • 关键帧动画keyframes（多个补间动画）
      • animation-direction
      • animation-iteration-count
      • animation-play-state
      • animation-fill-mode（forwards，backwards） ```css .container { width: 400px; height: 300px; background: red; padding: 10px; animation: run 1s; }

    @keyframes run { / 0%->from 100%->to / 0% { width: 400px; } 100% { width: 600px; } } ```

    • 逐帧动画
      • 适用于无法补间的动画
      • animation-timing-function：steps(1)