相关疑难解决方法(0)

我正在尝试为精灵图像设置动画,并找到了这个很好的例子:

博客:http://simurai.com/blog/2012/12/03/step-animation/(已经屈服于linkrot).
Wayback Machine:http
://web.archive.org/web/20140208085706/http: //simurai.com/blog/2012/12/03/step-animation/ Code Fiddle:https: //codepen.io/simurai/笔/ tukwj

JSFiddle:http://jsfiddle.net/simurai/CGmCe/

.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");

-webkit-animation: play .8s steps(10) infinite;
   -moz-animation: play .8s steps(10) infinite;
    -ms-animation: play .8s steps(10) infinite;
     -o-animation: play .8s steps(10) infinite;
        animation: play .8s steps(10) infinite; }

Run Code Online (Sandbox Code Playgroud)

@ -webkit-keyframes play {from {background-position:0px; } {background-position:-500px; }}

@ -moz-keyframes play {from {background-position:0px; } {background-position:-500px; }}

@ -ms-keyframes play {from {background-position:0px; } {background-position:-500px; }}

@ -o-keyframes play …