应用css3做动画

从某网站copy了一张图片

于是就打算应用css把这个动画连起来，代码如下：

<style><!--
.img{
width:80px;
height:80px;
overflow: hidden;
background: url("./img/anim-app.png") no-repeat;
background-position:0 0;
-webkit-animation-name: slow;
-webkit-animation-duration: 1280ms;
-webkit-animation-timing-function: steps(15, start);
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes slow {
0% {
background-position: 0 0;
}
100%{
background-position: -1200px 0;
}
}
--></style>
<div class="img">&nbsp;</div>

便可完成这个小动画了，这里我发现了个问题，这个图片长1280px,如果把100%处的background-position写成：-1280px 0,那么我的fill-mode：forwards，就不会如料想的一样在最后一帧，而是在空白处，所以100%处应该是-1200，而且应该是15步来完成，而不是16步。

以上仅仅是我工作之后的小总结，如有不同见解，可以留言并一起探讨，切莫看后怒气。