css - CSS sprite 动画未按预期工作

Question

我试图创建一个简单的 css sprite 动画。类似于示例链接的东西。但出于某种原因，在我的示例（链接）中，动画看起来不太好（位置变化是动画的）。

这是我的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; } 
}

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