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标签用来播放动画：