css3逐帧动画-飘动旗子
写css3动画的时候，我们经常用到animation来实现，默认情况下，animation是使用连贯性的ease动画。我们熟悉的animation动画有·ease·、·ease-in·、·ease-out·、·linear·、·cubic-bezier·等过段函数，当然还有我们可能不是很熟悉的·steps·跳帧函数。我们在做一些特殊的动画，比如一个飘动的旗子、一个奔跑的小人，这些动画不需要补间，这时候需要的是跳帧·steps·。
逐帧动画实现方法：
1、把动画帧切图合并在一起
2、通过CSS3的animation控制
background-position
方法很简单，这里使用到的就是前面提到的过度函数steps
steps介绍：
·steps· 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end
比如：steps(1,start)、steps(1,end)或者steps(1)
这样讲很抽象，即使记住了，真正在做动画的时候也可能搞混
逐帧动画实例：
下面通过一个数字（1—5）变化动画来看看到底start和end两个会有什么不同的效果：
1、steps(1,start)效果
先看下背景合并图：
代码（这里只写webkit的前缀，其它的兼容前缀在实际项目中自己补全）：
.ani1{
height:200px;
width:200px;
background:url(img/bg.png) no-repeat 0 0;
-webkit-animation:num_ani 2s steps(1,start) infinite;/*效果1*/
}
.ani2{
height:200px;
width:200px;
background:url(img/bg.png) no-repeat 0 0;
-webkit-animation:num_ani 2s 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截图：
从上面的gif可以看出，效果一里面的数字‘1’没有显示出来，而且后面那个边空白了，效果二达到预期效果。
通过上面的栗子，相信已经明白了steps的第二个参数的区别了。再看看上面keyframes的设置，我们要的效果其实是5个变化，但是我们写了6帧的时间点。我们的第五个数字的背景是 background-position:-800px 0，为什么上面的帧要写到background-position:-1000px 0;
一开始，我们可能按照以前连贯的动画写法，但是这里是以跳帧的形式运行动画的。比如说，我们要见到数字1（也是0%-20%之间），那么我们应该显示0到-200px之间的背景。也就是说我们的逐帧动画的帧数应该加1的。
点击在线demo：
旗子飘动例子：
细心的童鞋可以看到，上面例子的steps的第一个参数都是取值1，取值为1的意思是指动画在一步完成，然后具体的跳帧是需要我们自己在keyframes里面设置。
旗子飘动代码：
.ani3{
height:55px;
width:60px;
margin:100px;
background:url(images/flag.png) no-repeat 0 0;
-webkit-animation:flag_ani 0.8s 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：
手机阅读请扫描下方二维码：
0KeeTeam
Crawlergo
1
1
Crawlergo
Crawlergo
Crawlergo
1
1
1
1
1
1
1
1
1
1
0KeeTeam
0KeeTeam
gffipfzxgwsjobphypgt
0KeeTeam
0KeeTeam
0KeeTeam
0KeeTeam
expr 874249262 + 838317904
0KeeTeam
CRLF-Header:CRLF-Value
0KeeTeam
Crawlergo
Crawlergo
Crawlergo
Crawlergo
test
test
test
test
test
test
test
test
test
/1/{{851633493+921759300}}
${821317062+882671238}
test
CRLF-Header:CRLF-Value
test
test
test
test
test
test
test
test
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
admin