CSS精灵动画未按预期工作

我试图创建一个简单的css精灵动画。类似于。 但由于某些原因，在我的示例中，动画看起来不太好（位置更改已设置动画）

这是我的css：

#loaderLogo {   
    background-image:  url(http://d76.cz/beta/img/sprite.png);  
    width: 40px;    
    height: 40px;   
    position: absolute;     
    left:50%;   
    top:50%;    
    margin-left: -20px;     
    margin-top: -20px;
    animation: animate-logo .75s steps(6) infinite;
    -moz-animation:animate-logo .75s steps(6);
    -webkit-animation:  animate-logo .75s steps(6) infinite; 
}


@keyframes animate-logo {      
     from { background-position:    0px; }
     to { background-position: -200px; } 
}


@-webkit-keyframes animate-logo{    
   from { background-position:    0px; }
     to { background-position: -200px; } 
}

@-moz-keyframes animate-logo {    
     from { background-position:    0px; }
     to { background-position: -200px; } 
}

---

你知道我做错了什么吗？为什么我的例子中的动画是从右到左，而不是在原地改变背景位置？

我刚刚明白了。。。这是因为我的动画中的步长应该是5而不是6为什么不使用一个图像并顺时针旋转它呢？