<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #tsj{ position: absolute; width: 48px; height: 48px; left: 50%; top: 50%; /*transform有限制，不能重复用两个，这样子只会有一个生效，这样子的话，就annimation就有作用了*/ /*transform: translate3d(-50%,-50%,0);
整个动作只有一步，在时间为 0 处，position 设置为 start 时动画的第一步已执行完成
相同情况下，position 设置为 end ，当时间为 0 时动画的第一步尚未开始
*/ margin-left: -50px; margin-top: -50px; border-radius:50% ; background: url(img/animation.png); animation: move 1s steps(12,end) infinite; } @keyframes move{ from{background-position: 0 0;} to{background-position: -576px 0;} } </style> </head> <body> <div id="tsj"> </div> </body> </html>