css3实现逐帧动画

例子

demo：你们要的小姐姐

解析

做css3逐帧动画，你只需要一张类似sprite图（雪碧图），如下图：

这张图也不算标准，中间间隔没有一致，因为网上随便找的，大家将就看一下。

什么是steps?

steps: specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.

大体翻译一下就是：

steps：函数指定了一个阶跃函数，如上所述，接收两个参数。 第一个参数指定函数中的间隔数。它必须是一个正整数（大于0）。 第二个参数是可选的，可以是'开始'或'结束'值，并指定每个间隔的起点或是终点发生阶跃变化。如果省略第二个参数，则给出值'end'。

• steps-start: start是忽略动画的第一帧，即0%和100%这2帧是重叠的。
• steps-end: end是忽略动画的最后一帧，即0%和100%这2帧也是重叠的。

小技巧

对于我们要做的这个sprite（雪碧图）一般要在最后一帧留一个空白帧。 为什么呢？你可以这样理解，当你100% background-position跑到最后一帧这个位置时，瞬间回到0%最后一帧其实是没看到的，所以一般多做一帧空白帧 这样100%到空白帧时瞬间回到0%跟第一帧重叠。

所以一般多做一帧空白帧，这样100%到空白帧时瞬间回到0%跟第一帧重叠，这样就不会出现漏帧的问题啦！

详细的解析请参考：CSS3 timing-function: steps() 详解

讲解了这么多，大家都对steps有一定的了解了吧，接下来就上一下demo的代码：

.smile {
    background: url('http://eherry.test.upcdn.net/animation/statics/aa.jpg') no-repeat;
    width: 200px;
    height: 134px;
    background-position: 0 0;
    animation: smile 1s step-end infinite; // 这里的step-end 相当于step(1, end);
    -webkit-animation: smile 1s step-end infinite;
  }
  
  // 6张动画，对应6帧
  @keyframes smile {
    0%{ background-position: 0 0; }
    20%{ background-position: 0 20%; }
    40%{ background-position: 0 40%; }
    60%{ background-position: 0 60%; }
    80%{ background-position: 0 80%; }
    100%{ background-position: 0 100%; }
  }
复制代码

其实就是这么简单啦~今天就先分享到这里吧，希望大家多提提建议~