动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画
，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

制作动画分为两步：

  1. 先定义动画
  2. 再使用（调用）动画

用 keyframes 定义动画（类似定义类选择器）

  1.     @keyframes 动画名称 {
  3.       /* 动画的开始 */
  4.       0% {
  5.         width: 100px;
  6.       }
  8.       /* 动画的完成 */
  9.       100% {
  10.         width: 200px;
  11.       }
  12.     }

动画序列

  • 0% 是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
  • 在 @keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元索从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间,或用关键词”from“和”to“ ,等同于0%和100%。

元素使用动画

    div {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 调用动画 */
      animation-name: 动画名称;
      /* 持续时间 */
      animation-duration: 持续时间;
    }

例子

盒子宽度由0px变为200px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes move {

      /* 初始状态 */
      0% {
        width: 0px;
      }

      /* 最后状态 */
      100% {
        width: 200px;
      }
    }

    div {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 调用动画 */
      animation-name: move;
      /* 持续时间 */
      animation-duration: 3s;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

盒子走矩形

走四次，100/4=25

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes move {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(1000px, 0);
      }

      50% {
        transform: translate(1000px, 500px);
      }

      75% {
        transform: translate(0, 500px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    div {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 调用动画 */
      animation-name: move;
      /* 持续时间 */
      animation-duration: 10s;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

动画常见属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。( 必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒 ， 默认是0。( 必须的)
animation-timing-function 规定动画的速度曲线，默认是”ease”
animation-delay 规定动画何时开始,默认是0。
animation-iteration-count 规定动画被播放的次数,默认是1，还有infinite（无限）
animation-direction 规定动画是否在下一周期逆向播放,默认是”normal “,alternate逆播
animation-play-state 规定动画是否正在运行或暂停。默认是”running” ,还有”paused”。
animation-fill-mode 规定动画结束后状态,保持forwards回到起始backwards

动画简写属性

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

总结

  • 简写属性里面不包含 animation-play-state
  • 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
  • 想要动画走回来, 而不是直接跳回来: animation-direction : alternate
  • 盒子动画结束后,停在结束位置: animation-fill-mode : forwards