CSS3 逐帧动画

有次在工作中，需要做一个逐帧动画放在首页，第一次制作一个GIF格式图片，在制作的过程中发现GIF居然不支持半透明（gif格式，是索引色彩格式，也就是最高支持8位256种颜色，虽然支持全透明透明，但只能在256色彩里面选择，无法支持半透明），后来使用Flash制作又发现必须得安装Flash插件，使用js写吧又嫌太麻烦（其实我不会哈哈），当时就尴尬了。然后苦思冥想就想到了 CSS3 的新属性 Animation。

我们都熟悉 Animation 动画有ease、ease-in、ease-out、linear、cubic-bezier等补间过段函数，默认情况下，Animation是属于连贯性的ease动画。但它还有一个我们不太熟悉的steps跳帧函数（会Flash的同学对于补间和跳帧词汇应该不陌生），此时此刻用它就在合适不过了

Steps 使用淫计

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

这样说可能很抽象，即便现在记住了，真正搞的时候也可能搞混，还是继续看示例吧！

逐帧动画实现原理

把所有动作即每一张图合成到一张图上（业内对这种做法好像叫它雪碧图吧）
通过CSS3的Animation控制background-position改变图的位置

逐帧动画实例

下面是英文字母A～E的变化动画，来看看start和end到底有什么不同吧，先放一张合成图

Start效果和end效果

源代码如下：

#one {
    width: 200px;
    height: 200px;
    background: url("img/frameimg.png") no-repeat top left;
    -webkit-animation:frame-animation 3s steps(1,start) infinite; /* Chrome Safari */
       -moz-animation:frame-animation 3s steps(1,start) infinite; /* FF */
         -o-animation:frame-animation 3s steps(1,start) infinite; /* Opera */
            animation:frame-animation 3s steps(1,start) infinite; /* 标准规范 */
}
#two {
    width: 200px;
    height: 200px;
    background: url("img/frameimg.png") no-repeat top left;
    -webkit-animation:frame-animation 3s steps(1,end) infinite;    /* 这里我就不写兼容了，根据你实际情况请自行补全 */
}
@-webkit-keyframes frame-animation {
    0% {background-position: 0 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;}
}
@keyframes frame-animation {
    0% {background-position: 0 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;}
}

通过上面的例子我们可以这样分析: steps（）有两个参数

第一个参数是个数字（非负数字），即1表示一帧一帧的跳
第二个参数start、end，start表示这帧的开头就跳，end表示时间到这帧的结尾时再跳

所以在start效果中 A 没显示出来

CSS3 逐帧动画