使用CSS3 steps()实现精灵表

实现了一个这样的动画效果,点击播放按钮后,按钮播放动画:

使用CSS3动画支持,可不必编写JavaScript代码实现这样的功能。

首先,需要一张这样的图:

这种图叫:Sprite sheet,即精灵表,是游戏中常用的做法。

然后,定义个CSS3 keyframe动画:

1
2
3
4
@-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -600px; }
}

这个动画将让背景图向左水平移动。如果只是简单的移动,我们无法得到上面的效果,而是类似走马灯的效果了。

那么需要steps(),在引用该动画的元素上:

1
2
3
4
5
6
width: 100px;
height: 100px;
background-image: url("http://shiqichan.qiniudn.com/Sprite-Sheet-Animation-With-CSS3-steps/anim.png");
margin: 0 auto;

-webkit-animation: wink 3s steps(6, end) infinite;

主要是这句-webkit-animation: wink 3s steps(6, end) infinite;。其中,3s表示动画从0-600像素的时间,steps指定,分6次执行,执行到-600像素,无限循环执行。

因为精灵表600像素,每次执行一个100像素的小图,正好是500毫秒换1张图。

写了个简单的例子,可以在这里下载