css3精灵动画,巧用CSS3动画与精灵图制作关键帧动画
巧用CSS3动画与精灵图制作关键帧动画
这篇主要介绍CSS3中animation动画属性的animation-timing-function属性，并不会介绍CSS3的animation全部特性，如需了解CSS3的animation属性完整的使用技巧，可以看之前写的这一篇 玩转有趣的 CSS3 Animation 动画。
巧用CSS3的keyframes与精灵图制作非GIF关键帧动画
默认的，当我们想要使用CSS3的@keyframes特性创建一个动画时，你还记得它的缓动值是什么吗？
如果单独设置animation属性属性的每一个值，缓动属性指的就是 animation-timing-function，从上图中可发现，该缓动属性的默认值是 ease，也就是从淡入到淡出的缓动值。
下面看一个例子：
从红色到蓝色的动画。
下面是源代码，为了方便期间，这里不采用符合属性，而将属性拆分开并单独罗列，以便于分析。
.box1{
width:100px;
height:100px;
animation-name:box1;
animation-duration:1s;
animation-timing-
function:ease;
animation-iteration-count:infinite;
}@keyframesbox1{
0%{
background:#ff0000;
}
50%{
background:#00ff00;
}
100%{
background:#0000ff;
}
}
从上面的例子中能看到非常平缓的颜色过渡效果。这就是将animation-timing-function设置为 ease 的效果。
再来看下animation-timing-function一些可能的值：
/* Keyword values */
animation-timing-function:ease;
animation-timing-function:ease-in;
animation-timing-function:ease-out;
animation-timing-function:ease-in-out;
animation-timing-function:linear;
animation-timing-function:step-start;
animation-timing-function:step-end;
/* Function values */
animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);
animation-timing-function:steps(4,end);
animation-timing-function:frames(10);
/* Multiple animations */
animation-timing-function:ease,step-start,cubic-bezier(0.1,0.7,1.0,0.1);
/* Global values */
animation-timing-function:inherit;
animation-timing-function:initial;
animation-timing-function:unset;
我试着使用不同的animation-timing-function属性值，看一下他们之间的区别：
首先定义相同的@keyframes规则：
@keyframesbox2{
0%{
background:#ff0000;
transform:scale(0,0)translate(0px,0px);
}
50%{
background:#00ff00;
transform:scale(1,1)translate(100px,0px);
}
100%{
background:#0000ff;
transform:scale(1,1)translate(0px,0px);
}
}
① 使用step-start属性值：
.box2-1{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:step-start;//step-start
animation-iteration-count:infinite;
}
② 使用step-end属性值：
.box2-2{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:step-end;//step-end
animation-iteration-count:infinite;
}
③ 使用steps()属性值：
.box2-3{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:steps(2,start);//steps()
animation-iteration-count:infinite;
}
④ 使用ease属性值：
.box2-4{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:ease;//ease
animation-iteration-count:infinite;
}
⑤ 使用ease-in属性值：
.box2-5{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:ease-in;//ease-in
animation-iteration-count:infinite;
}
⑥ 使用ease-out属性值：
.box2-6{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:ease-out;//ease-out
animation-iteration-count:infinite;
}
⑦ 使用ease-in-out属性值：
.box2-7{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:ease-in-out;//ease-in-out
animation-iteration-count:infinite;
}
⑧ 使用linear属性值：
.box2-8{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:linear;//linear
animation-iteration-count:infinite;
}
⑨ 使用cubic-bezier()属性值：
.box2-9{
width:70px;
height:70px;
border-radius:50%;
animation-name:box2;
animation-duration:1s;
animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);//cubic-bezier()
animation-iteration-count:infinite;
}
我想借助animation属性，将一组静态格式的序列图片按照一定时间间隔播放，看起来就像GIF图一样，从上面的示例来看，实现这一效果，首选就是 steps() 属性值，因为这个属性值能将动画的过程切分成长度相同的时间间隔，就像是逐帧动画，我只要将动画规则设置为改变背景图像的background-position属性值，就能实现在不适用gif图的前提下实现动画。
说干就干，首先我需要准备一组序列图。
上方是一张从网络中下载的gif图片
我从网上下载了一张gif图，然后将其放入ps中处理，得到我想要的象sprite那样的一张静态序列图。
拖入PS中后可以看到这张gif图一共有12帧，我将这些帧小心的排列成一行或一列；
将其导出为静态图片，任意格式，此时可以在图片大小、质量与占用空间上做权衡，最终我选择将其导出为jpg格式的，宽度为1920，高度为90的横向序列的图片。
在进入正式的animation实现动画之前，我需要知道整张序列图中每一张小图的宽高，好在后续设置背景图像容器的宽高，还需要知道这张序列图一共有几张小图，前期已经知道了共有12张小图：
排列方式：横向排列
大图宽度：1920px
大图高度：90px
小图个数：12(个)
小图宽度：1920/12=160(px)
知道这些参数后，就可以进入CSS3的书写环节：
@keyframesmove-jpg{
0%{
background-position:0px0px;
}
100%{
background-position:-1920px0px;
}
}
.move-jpg{
width:160px;
height:90px;
background-image:url(/public/article/1511946406127/sucai.jpg);
animation-name:move-jpg;
animation-duration:1s;
animation-timing-function:steps(12,end);
animation-iteration-count:infinite;
}
我在定义一个div标签用来播放动画：