<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sprite Demo</title>
<style>
#an {
width: 128px;
height: 128px;
background: url(img/spriteB.png);
animation: move infinite 4s steps(8,end);
}
/* -254，-384 x-1152 1024-128= 896 */
@keyframes move {
0% {
background-position:0 -256px;
}
50% {
background-position:-1024px -256px;
}
50.001% {
background-position:0 -384px;
}
100% {
background-position:-1024px -384px;
}
}
</style>
</head>
<body>
<div id="an"></div>
</body>
</html>
SpriteB图片下载:
