css3精灵动画,逐帧自适应精灵图+css3实现小动画

这个是固定像素的逐帧精灵图：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Title

.flashImage{

width: 200px;

height: 312px;

background-image: url("img/walkingdead.png");

-webkit-animation: play 2s steps(10) infinite;

-o-animation: play 2s steps(10) infinite;

animation: play 2s steps(10) infinite;

}

@keyframes play {

from{

background-position: 0;

}

to{

background-position: -2000px;

}

}

自适应任意尺寸的精灵图：

css3雪碧图任意缩放

.boxA {

width: 200px; /*宽高尺寸任意增减*/

height: 312px;

background:url("walkingdead.png") no-repeat;

background-size: 1000% 100%; /*这项是关键，用来撑开拼凑起来的序列帧，一行10帧图就是1000%*/

-webkit-animation: bird-slow .5s steps(3) infinite; /*发生了3次位移steps就是3*/

animation: bird-slow .5s steps(3) infinite;

}

@keyframes bird-slow {

0% {

background-position: 0% 0%;

}

100% {

background-position: 100% 0%; /*整张图是100%，9次位移每一次是11%，第9次就是99%*/

}

}

@-webkit-keyframes bird-slow {

0% {

background-position: 0% 0%;

}

100% {

background-position: 100% 0%;

}

}

walkingdead.png