animation 属性

animation 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
并非所有属性都支持 animation。支持 animation 的属性 -- CSS animated properties
用于指定一组或多组动画，每组之间用逗号相隔。
语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

animation-name 属性，指定元素要进行的一系列动画名称，每个名称对应是 @keyframes 定义的动画序列名称。

@keyframes

@keyframes (关键帧)，根据规则用于定义动画关键帧的样式，来控制CSS动画的中间步骤。
定义动画时，使用 % 或关键字from和to，来设置动画中间步骤的变化。from相当于0%,to相当于100%
为了获得最佳的浏览器支持，您应该始终定义 0%和100% 的选择器。
语法：

@keyframes <规则名称>
{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
}

animation-duration

animation-duration 属性指定动画持续时间。默认值为 0，意味着没有动画效果。
动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位或负值无效。

animation-timing-function

animation-timing-function 属性控制CSS动画执行的节奏。
其规定好了几个默认值 linear|ease|ease-in|ease-out|ease-in-out，实现移动效果。也可是使用 cubic-bezier(n,n,n,n) 函数自定义，移动曲线。
使用 steps(n,[start | end]) 实现跳跃动画，简单理解就是 0% 到下一个规则，只变化n次，不是补间动画。

animation-delay

animation-delay CSS属性定义动画于何时开始，即延迟动画执行时间。
值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效，0s为默认时间。
设置负值，为直接在减少时间的对应帧开始动画。

animation-iteration-count

animation-iteration-count 属性定义动画在结束前运行的次数可以是1次无限循环，默认值为1。
值：infinite 无限次，<number> 正数为次数，小数会执行到对应位置结束，负数为无效值。

animation-direction

animation-direction 属性指示动画是否反向播放。
normal 每个动画循环结束，动画重置到起点重新开始，这是默认属性。 alternate 每个动画循环结束，动画重结束点反向开始。 reverse 从结束点，反向开始执行动画。 alternate-reverse 从结束点，反向开始执行动画，到起始点反向执行到结束点，一直重复。

animation-fill-mode

animation-fill-mode 属性，用于设置动画在执行之前和之后是否保留关键帧对应的样式。
默认值 none 不修改任何样式。
forwards 当动画结束后，修改元素样式为最后一帧的样式。
backwards 当动画开始时，修改元素样式为第一帧样式。比如设置了等待时间，等待时间中也会修改元素样式为第一帧样式。
both 遵循 forwards和backwards 的规则，开始后结束都修改样式。

animation-play-state

animation-play-state 属性定义一个动画是否运行或者暂停。
值 paused 规定动画已暂停。running 规定动画正在播放。一般是通过js来给元素设置这个属性控制动画。

常用方式

推举文章：【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

波纹效果

<!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 type="text/css">
      .animation {
        box-sizing: border-box;
        position: relative;
        width: 20px;
        height: 20px;
        margin: 100px auto;
        background: #409eff;
        border-radius: 50%;
      }

      .animation:after {
        box-sizing: border-box;
        content: "";
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
        border: 5px solid #ff1883;
        border-radius: 50%;
        -webkit-animation: antSing 1.2s ease-in-out infinite;
        animation: antSing 1.2s ease-in-out infinite;
      }

      @keyframes antSing {
        0% {
          border-color: #409eff;
          -webkit-transform: scale(0.8);
          transform: scale(0.8);
          opacity: 0.5;
        }
        100% {
          border-color: #ff1883;
          -webkit-transform: scale(2.5);
          transform: scale(2.5);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

通过动画属性，设置元素变大的同时隐藏，实现波纹效果

加载中动画

<!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 type="text/css">
      .loading {
        background-color: #000000;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
      }

      .loading-center-load {
        position: relative;
        height: 20px;
        width: 100px;
        margin: 200px auto;
      }

      .object {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        -webkit-animation: object 2.5s linear infinite;
        animation: object 2.5s linear infinite;
      }

      .object_one {
      }
      .object_two {
        left: 20px;
        animation-delay: -0.5s;
      }
      .object_three {
        left: 40px;
        animation-delay: -1s;
      }
      .object_four {
        left: 60px;
        animation-delay: -1.5s;
      }
      .object_five {
        left: 80px;
        animation-delay: -2s;
      }
      @keyframes object {
        0% {
          left: 100px;
          top: 0;
        }
        80% {
          left: 0;
          top: 0;
        }
        85% {
          left: 0;
          top: -20px;
          width: 20px;
          height: 20px;
        }
        90% {
          width: 40px;
          height: 15px;
        }
        95% {
          left: 100px;
          top: -20px;
          width: 20px;
          height: 20px;
        }
        100% {
          left: 100px;
          top: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="loading">
      <div class="loading-center-load">
        <div class="object object_one">1</div>
        <div class="object object_two">2</div>
        <div class="object object_three">3</div>
        <div class="object object_four">4</div>
        <div class="object object_five">5</div>
      </div>
    </div>
  </body>
</html>

我们需要5个球动起来，先设置小球的位置。
定义运动轨迹，使用infinite无限循环效果。
使用animation-delay属性设置负值，让动画第一次循环，直接从对应帧位置执行，保证循环效果。

使用雪碧图实现动画

<!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 type="text/css">
      .loading {
        width: 75px;
        height: 140px;
        background: url(./1.png);
        margin: 100px auto;
        animation:imgFr 1s step-start infinite ;
      }
      @keyframes imgFr {
        0% {
          background-position: 0 0;
        }
        14.3% {
          background-position: -80px 0;
        }
        28.6% {
          background-position: -160px 0;
        }
        42.9% {
          background-position: -240px 0;
        }
        57.2% {
          background-position: 0 -143px;
        }
        71.5% {
          background-position: -80px -143px;
        }
        85.8% {
          background-position: -160px -143px;
        }
        100% {
          background-position: -240px -143px;
        }
      }
    </style>
  </head>
  <body>
    <div class="loading"></div>
  </body>
</html>

主要是使用background-position属性获取图片人物的位置。
使用step-start让动画不是补间动画，而是跳跃动画。step-start 等同于 steps(10,start) 动画分成10步，动画执行时为开始左侧端点的部分为开始。

学习 animation属性 和 常用方式