通过css样式实现精灵动画

本文主要是介绍通过css样式实现精灵动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

这里用到animation来切换css的背景图片

.slowWalk {
/* 填入动画样式规则 */
-webkit-animation-name:person-slow;
-webkit-animation-duration:950ms;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:steps(1,start);
-moz-animation-name:person-slow;
-moz-animation-duration:950ms;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:steps(1,start);
animation-name:person-slow;  //规定@keyframes动画的名称
animation-duration:950ms; //规定完成整个动画花费的时间
animation-iteration-count:infinite; //规定动画被播放的次数。默认是 1， infinite表示循环播放
animation-timing-function:steps(1,start); //有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式；

//第一个参数作用于每两个关键帧之间，这里指切换方式是一帧一帧改变。

//第二个参数start或end，2个参数都会选择性的跳过前后部分，start跳过0%的画面，end跳过100%的画面

}

/* 普通慢走 */

@-webkit-keyframes person-slow { /* Safari 和 Chrome */

0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}

@-moz-keyframes person-slow { /* Firefox */

0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}