动画的原理

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

动画的作用

• 愉悦感
• 引起注意
• 反馈
• 掩饰

CSS 中的动画类型

• transition 补间动画：一个动画从一个状态切换到另一个状态会有动画，中间的动画是补出来的
• keyframe 关键帧动画：也是补间动画，但是每个状态可以进行定义
• 逐帧动画

补间动画

• 位置-平移（left/right/margin/transform）
• 方位-旋转（transform）
• 大小-缩放（transform）
• 透明度（opacity）
• 其他-线性变换（transform）

例子：

  <style>
    .container {
      width: 100px;
      height: 100px;
      background: red;
      /* transition过度-动画 动画属性width*/
      /* transition: width 1s; */
      /* 所有的属性都加动画 */
      transition: all 1s;
      /* 指定动画进度和时间的关系 linear是线性动画*/
      /* transition-timing-function: ease-in-out; */
      /* 使用贝塞尔曲线 */
      transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435);

      /* 动画延迟一秒在执行--开始结束都会有，可以连写 transition: 1s width 1s*/
      /* transition-delay: 1s; */
      /* 同时指定多个属性的变化 */
      /* transition: width 1s, background 1s; */
    }

    .container:hover {
      width: 800px;
      background: green;
      /* transform: rotate(7deg) */
    }
  </style>
  <div class="container">
  </div>

关键帧动画

• 相当于多个补间动画
• 与元素状态的变化无关
• 定义更加灵活

  <style>
    .container {
      width: 100px;
      height: 100px;
      background: red;
      /* 执行定义的动画run，时间为1s 线性动画*/
      animation: run 1s linear;
      /* 可以指定动画是正向还是反向的 */
      animation-direction: reverse;
      /* 动画最后停在哪里 */
      /* animation-fill-mode: forwards; */
      /* 循环的次数infinite为无线循环，可以指定数字，比如为2，就是执行两次 */
      /* animation-iteration-count: infinite; */
      /* 播放状态-是否暂定 */
      /* animation-play-state: paused; */
    }

    /* 定义动画 */
    @keyframes run {

      /* 0%可以写成from */
      0% {
        width: 100px;
      }

      50% {
        width: 800px;
      }

      /* 100%可以写成to--如果中间有其他的就写成数字 */
      100% {
        width: 100px;
      }
    }
  </style>
  <div class="container">
  </div>

逐帧动画

• 适用于无法补间计算的动画
• 资源较大
• 使用steps()
• 适用于画面少、动画短

  <style>
    .container {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background: url(./animal.png) no-repeat;
      animation: run 1s infinite;
      /* 指定时间与动画进度之间的关系--关键帧之间有几个画面，也就是他自己会进行补间 */
      animation-timing-function: steps(1);
    }

    @keyframes run {
      0% {
        background-position: 0 0;
      }

      12.5% {
        background-position: -100px 0;
      }

      25% {
        background-position: -200px 0;
      }

      37.5% {
        background-position: -300px 0;
      }

      50% {
        background-position: 0 -100px;
      }

      62.5% {
        background-position: -100px -100px;
      }

      75% {
        background-position: -200px -100px;
      }

      87.5% {
        background-position: -300px -100px;
      }

      100% {
        background-position: 0 0;
      }
    }
  </style>
  <div class="container">
  </div>

CSS 面试真题

CSS 动画的实现方式有几种

• transition
• keyframes(animation)

过度动画和关键帧动画的区别

• 过度动画需要有状态变化
• 关键帧动画不需要状态变化
• 关键帧动画能控制更精细

如何实现逐帧动画

• 使用关键帧动画
• 去掉补间(steps)：animation-timing-function: steps(1)

CSS 动画的性能

• 性能不坏
• 部分情况下由于 JS
• 但 JS 可以做到更好
• 部分高危属性：box-shadow 等

阅读量：

评 论：