写在最前面： CSS 永远让你惊喜不断 ……

作为前端程序猿的我们，为了提高用户体验度，往往会在用户点击某个按钮 或者 首次进入某个页面时候 会有一个 loding 加载框，类似于下面这个效果图；

WeChat0784e6a29631f5a195af94ef876601c0.png

是不是没有看到我这篇文章之前第一反应都是让UI出一个gif图？？？

用gif图来做这个图片会在某种场景下出现问题：

1. gif不具备AIpha透明的特性；
2. 无法在css层里面修改 UI 已经创建好的gif图，比如说循环次数、是否暂停等等，也就是说 GIF 图一旦生成，上述所有参数就固定在文件内部了；如果想要做修改，就只能动用图像处理软件去重新生成新的GIF文件。

现在介绍咱们本期的主角： steps() —— 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。
下面演示代码所使用的图片为：

test.png

上代码：

  <div class="loding">Loding...</div>

  .loding{
      width:100px;
      height:100px;
      background: url('test.png') 0 0;
      animation: loding 1s infinite steps(8);  // 这里的8指的是使用的图片一共有几张状态图片的数量
      text-index:200%;
      white-space:nowrap;
      overflow:hidden;
  }

@keyframes loding{
      to{
          background-position: -800px 0;   // 一个状态的图片宽度是200px 一共走8步； 
      }
}