使用CSS3 Sprite（雪碧图）可以制作帧动画，如下
效果：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; /* 单帧显示宽度 */ height: 312px; /* 单帧高度 */ background: url(https://www.html5tricks.com/demo/css3-sprite-zombie-walking/img/walkingdead.png); animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */ -webkit-animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */ } @keyframes mymove{ 0% {background-position: 0px 0;} 100% {background-position: -2000px 0;} /* 图片总宽度 */ } @-webkit-keyframes mymove{ 0% {background-position: 0px 0;} 100% {background-position: -2000px 0;} /* 图片总宽度 */ } </style> </head> <body> <div></div> </body> </html>
再来个例子——其实就是换张图：
效果（由于图片不是很精致所以旁边有黑边）：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 242px;/* 单帧显示宽度 */ height:182px;/* 单帧高度 */ background: url(https://img-blog.csdn.net/20170222170027721); animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */ -webkit-animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */ } @keyframes mymove{ 0% {background-position: 0px 0;} 100% {background-position: -1684px 0;} /* 图片总宽度 */ } @-webkit-keyframes mymove{ 0% {background-position: 0px 0;} 100% {background-position: -1684px 0;} /* 图片总宽度 */ } </style> </head> <body> <div></div> </body> </html>
参考：
https://www.cnblogs.com/Fengzp/p/5548493.html##commentform
https://blog.csdn.net/chy555chy/article/details/56489497
示例来源：https://www.html5tricks.com/demo/css3-sprite-zombie-walking/index.html