用css编写动画,相比较js(jquery)的动画来说,对于浏览器的压力较小,所以对于支持css3的浏览器,推荐使用css3来制作简单动画
1、将动画使用的3帧图画切在一张图片上,并确定好每一帧图画的宽、高、在图片上的位置
2、编写css程序
.people{
background-image: url('images/img.png');
background-position:-5px -530px;
width: 85px;
height:102px;
display:block;
}
.people_run{
background-position:-5px -530px;
animation: running 0.1s; /* 控制动画播放时间 */
-moz-animation: running 0.1s; /* Firefox */
-webkit-animation: running 0.1s; /* Safari 和 Chrome */
-o-animation: running 0.1s; /* Opera */
}
@keyframes running{
0% {background-position:-5px -530px;}/* 第1帧的图 */
15% {background-position:-5px -530px;}
15.1% {background-position:-95px -530px;}/* 第2帧的图 */
75% {background-position:-95px -530px;}
75.1% {background-position:-5px -530px;}/* 第3帧的图 */
100% {background-position:-5px -530px;}
}
@-moz-keyframes running /* Firefox */
{
0% {background-position:-5px -530px;}
15% {background-position:-5px -530px;}
15.1% {background-position:-95px -530px;}
75% {background-position:-95px -530px;}
75.1% {background-position:-5px -530px;}
100% {background-position:-5px -530px;}
}
@-webkit-keyframes running /* Safari 和 Chrome */
{
0% {background-position:-5px -530px;}
15% {background-position:-5px -530px;}
15.1% {background-position:-95px -530px;}
75% {background-position:-95px -530px;}
75.1% {background-position:-5px -530px;}
100% {background-position:-5px -530px;}
}
@-o-keyframes running /* Opera */
{
0% {background-position:-5px -530px;}
15% {background-position:-5px -530px;}
15.1% {background-position:-95px -530px;}
75% {background-position:-95px -530px;}
75.1% {background-position:-5px -530px;}
100% {background-position:-5px -530px;}
}
3、编写js辅助程序
$(".people").addClass('people_run');
由于css的动画只有在新加class上去的时候会有效果,
所以在动画播放完成后,需要remove掉class,
确保下一次使用addClass的时候能正常播放出动画效果。