css3逐帧动画

写css3动画的时候，咱们常常用到animation来实现，默认状况下，animation是属于连贯性的ease动画。咱们熟悉的animation动画有ease、ease-in、ease-out、linear、cubic-bezier等补间过段函数，固然还有咱们可能不是很熟悉的steps跳帧函数。咱们在作一些特殊的动画，好比一个飘动的旗子、一个奔跑的小人，这些动画不须要补间，这时候须要的是跳帧steps。

逐帧动画实现方法：

一、把动画帧切图合并在一块儿

二、经过CSS3的animation控制background-position

方法很简单，这里使用到的就是前面提到的过分函数steps

steps使用：

steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每一个间隔的起点或是终点发生阶跃变化，默认为 end

好比：steps(1,start)、steps(1,end)或者steps(1)

这样讲很抽象，即便记住了，真正在作动画的时候也可能搞混

逐帧动画实例：

下面经过一个数字（1—5）变化动画来看看到底start和end两个会有什么不一样的效果：

一、steps(1,start)效果

先看下背景合并图：

代码（这里只写webkit的前缀，其它的兼容前缀在实际项目中本身补全）：

.ani 1 {      height : 200px ;      width : 200px ;      background : url (img/bg.png)  no-repeat  0  0 ;      -webkit-animation:num_ani  2 s steps( 1 ,start) infinite; /*效果1*/ } .ani 2 {      height : 200px ;      width : 200px ;      background : url (img/bg.png)  no-repeat  0  0 ;      -webkit-animation:num_ani  2 s steps( 1 ) infinite; /*效果2*/ }   @-webkit-keyframes num_ani{      0%  {          background-position : 0 ;      }      20%  {         background-position : -200px  0 ;      }      40%  {         background-position : -400px  0 ;      }      60%  {         background-position : -600px  0 ;      }      80%  {         background-position : -800px  0 ;      }      100%  {         background-position : -1000px  0 ;      } }

效果gif截图：

分析：效果一里面的数字‘1’没有显示出来，并且后面那个边空白了，效果二达到预期效果。

经过上面的栗子，相信已经明白了steps的第二个参数的区别了。再看看上面keyframes的设置，咱们要的效果实际上是5个变化，可是咱们写了6帧的时间点。咱们的第五个数字的背景是 background-position:-800px 0，为何上面的帧要写到background-position:-1000px 0;

一开始，咱们可能按照之前连贯的动画写法，可是这里是以跳帧的形式运行动画的。好比说，咱们要见到数字1（也是0%-20%之间），那么咱们应该显示0到-200px之间的背景。也就是说咱们的逐帧动画的帧数应该加1的。

点击在线demo：

css3逐帧动画DEMO》》》

旗子飘动例子：

细心的童鞋能够看到，上面例子的steps的第一个参数都是取值1，取值为1的意思是指动画在一步完成，而后具体的跳帧是须要咱们本身在keyframes里面设置。

旗子飘动代码：

.ani 3 {      height : 55px ;      width : 60px ;      margin : 100px ;      background : url (images/flag.png)  no-repeat  0  0 ;      -webkit-animation:flag_ani  0.8 s steps( 5 ) infinite; }   @-webkit-keyframes flag_ani{      100%  {         background-position : 0  -282px ;      } }

从上面能够看到，keyframes代码比数字变化的动画写法简单了不少，这是由于用了steps(5)，整个旗子的变化由5张图组成，下面是背景图的雪碧图：

steps里面指定动画的步数，而后在keyframes里面指定整个背景的position，像上面的旗子雪碧图的高度就是282px，而后steps函数就会把他平均分红5份，也就是282/5。平均这个词很重要，也是他和前面steps(1)的主要区别。前面咱们把整个动画看作一步完成，而后在keyframes里面具体的定义各个帧。而steps(5)是代码帮你平均分，若是你的雪碧图合拼的间距不一致，会出现动画错位的问题。

 

效果gif截图：

点击在线demo：

css3逐帧动画DEMO》》》