<style> div, body{ margin: 0; padding: 0; } body{ background-color: #333; } @keyframes runnings{ 0%{ background-position: 0% 0%; } 100%{ background-position: -1500px 0%; } } @-webkit-keyframes runnings{ 0%{ background-position: 0% 0%; } 100%{ background-position: -1500px 0%; } } .running{ width: 100px; height: 100px; background: url(http://7xov8j.com1.z0.glb.clouddn.com/open-moveImg.png) 0 0 no-repeat; background-size: cover; margin: 0 auto; -webkit-animation: runnings 1s steps(15) infinite; -moz-animation: runnings 1s steps(15) infinite; -ms-animation: runnings 1s steps(15) infinite; -o-animation: runnings 1s steps(15) infinite; animation: runnings 1s steps(15) infinite; } </style> <!-- 结构 --> <div class="running"></div>
注:keyframes 里的background-position的计算,容器的长度*steps。