css - CSS スプライト アニメーションが期待どおりに機能しない

Question

シンプルな CSS スプライト アニメーションを作成しようとしていました。example linkに似たもの。しかし、何らかの理由で私の例(リンク)ではアニメーションがうまく見えません (位置の変更がアニメーション化されています)。

これが私の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; } 
}

何が間違っているのか、背景の位置を変更するだけでなく、私の例のアニメーションが右から左に移動するのはなぜですか?