客户加载动画关键帧/背景位置

Question

我正在尝试使用关键帧和spritesheet创建自定义加载微调器。

jsfiddle：http://jsfiddle.net/Flignats/aaaaaf6h/

我的问题是旋转器看起来是滑动的（背景位置），我希望它在旋转时保持静止。

我的CSS：

.hi {
    width: 68px;
    height: 68px;
    background-image: url("data:image/png;base64, ... );

    -webkit-animation: play 1s steps(23) infinite;
       -moz-animation: play 1s steps(23) infinite;
        -ms-animation: play 1s steps(23) infinite;
         -o-animation: play 1s steps(23) infinite;
            animation: play 1s steps(23) infinite;
}

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

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

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

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -1496px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -1496px; }
}