<!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图片下载:文章来源：https://www.toymoban.com/news/detail-723190.html
![[Html5基础训练]animation的step使用方法,Html/CSS等前端技术,javascript,css,前端](https://imgs.yssmx.com/Uploads/2023/10/723190-1.png)
文章来源地址https://www.toymoban.com/news/detail-723190.html
到了这里，关于[Html5基础训练]animation的step使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
