今天突然翻出自己之前做的一个项目，看看了之前的需求有一个动画条需要在用户播放时动画条就闪动，暂停就停止不动。当时自己年少无知，以为实现不了就利用一个gif蒙混过去了。自从在移动端写了大量的animation动画后，发现animation可以实现此需求，所以决定将gif给废掉，自己模仿一个。
为什么不使用gif，而要使用animation来模仿了。
我们知道每个动画都是由三个过程来组成的：“开始——过渡——结束”，然而我们使用gif图的时候无法获取这些状态，可是css3却可以。我们可以利用这三个过程来控制我们想要的效果，这样使用的灵活度就高了。
制作之前，首先我们需要了解css3的amimation是啥东西，简单来说就是逐帧动画。以下是amimation的属性。
1、animation-name 引用动画名称
2、animation-duration 动画的持续时间
3、animation-timing-function 时间函数简单来说就是过渡效果
4、animation-delay 动画延迟时间
5、animation-iteration-count 动画播放次数
6、animation-direction 动画运动方向
7、animation-fill-mode 动画时间之外的状态
8、animation-play-state 动画当前的状态
下面我们开始来模拟gif，首先我们先简单的布一个局
html code：
<div class="m-gif">
<div class="inner"></div>
</div>
<div class="m-btn">
<div class="btn-play" id="J_btn_play">播放</div>
<div class="btn-pause" id="J_btn_pause">暂停</div>
</div>
css code：
body,html{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
.m-gif{
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
top:50%;
display: -webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
margin-top: -101px;
border: 1px solid #fff;
}
.m-gif .inner{
width: 18px;
height: 13px;
}
.m-btn{
position: relative;
margin: 0 auto;
width: 200px;
color: #fff;
top:50%;
margin-top:20px;
display: -webkit-box;
-webkit-box-pack:justify;
}
.m-btn > div{
border: 1px solid #fff;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
-webkit-user-select:none;
}
布局做好了，然后我们将所需要的图片拼成一张雪碧图，为何？相信很多人都知道了，原因很简单，假如你的动画条是由10个动画组合而成，而每一个动画都是一个图片。也就是说你浏览器需要请求10次，然后拼成雪碧图后浏览器只会请求一次，再利用background-position改变所要显示的图片即可。
我们需要动画条动起来靠上面的是实现不了的，所要我们需要加上amimation。
css code：
.m-gif .inner{
background: url(music.png) no-repeat;
-webkit-amintion-name:gif;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
}
动画的运动过程：
keyframes code：
@-webkit-keyframes gif{
from{
background-position: 0 0;
}
10%{
background-position: -25px 0;
}
20%{
background-position: -50px 0;
}
30%{
background-position: -75px 0;
}
40%{
background-position: -100px 0;
}
50%{
background-position: 0px -19px;
}
60%{
background-position: -25px -19px
}
70%{
background-position: -50px -19px
}
80%{
background-position: -75px -19px
}
90%{
background-position: -100px -19px
}
to{
background-position: 0 0;
}
}
写完之后我们发现背景会连续的平移过去，这不是我们想要的效果。这里就要用到animation-timing-function这个属性，因为我们想要的效果是从第一帧直接跳转到下一帧，而不是连续的。所以我们需要一个用到animation-timing-function中steps这个值。简单来说就是一个阶跃时间函数。
steps可以有两个取值，
第一个参数设定时间函数中的间隔次数，必须为正数。
第二个参数可选，设定动画在间隔的开始还是结束发生阶跃变化，默认end。
有了这个我们就可以来实现我们所需要的效果。
css code：
.m-gif .inner{
animation-timing-function:step-start; /*相当于steps(1, start)*/
}
这样我们的‘gif’就出来了。不过还有最后一个需求，就是控制动画条的播放与暂停。
amimation为我们提供了animation-play-state这个属性。作用主要是来控制动画的播放与暂停。
当取值为running时动画播放。
当取值为paused时动画播放。
最后我们完善我们的代码将播放暂停功能加上。因为打开页面动画条就是播放的，所以当我们按下暂停添加class来使动画条停止。
css code：
.m-gif.pause .inner{
-webkit-animation-play-state:paused;
}
到此我们的‘gif’就模拟成功了。
查看完整demo请搓这里 进入