爲什麼我的CSS sprite看起來像一個老電影？

我不明白爲什麼我的精靈動畫像一個老電影，而不是從一個點改變到另一個點的背景位置。它從左到右平滑滾動，這是有道理的，因爲我要求位置從左到右改變，但是不應該從一個圖像跳到另一個圖像，因爲我使用了steps（）？請幫忙找出我做錯了什麼：爲什麼我的CSS sprite看起來像一個老電影？

#sprite { 
background: url('img/example.png') no-repeat -4px -5px; 
width: 43px; 
height: 82px; 

    -webkit-animation: dance .5s steps(4) infinite; 
     animation: dance .5s steps(4) infinite; 
} 

@-webkit-keyframes dance { 
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; } 
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;} 
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;} 
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;} 
} 

@keyframes dance { 
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; } 
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;} 
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;} 
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;} 
}

我真的有問題想出來的，我很不善於解釋，所以我想也許我可以做的jsfiddle，以顯示它是如何區別動畫在我的版本與the example。

JS Fiddle

我非常感謝你能提供任何幫助。請讓我知道，如果我可以提供任何額外的信息來幫助解決這個問題。

謝謝！

來源

2014-04-22 Superman2971

你是什麼意思。請澄清。「就像一部老電影」並沒有說明太多。 – David

@David對不起，它通過從左向右滾動來轉換。我知道我正在要求程序從左邊的位置移動到正確的位置，但不應該從一個圖像跳到另一個圖像，因爲我使用了steps（）？ – Superman2971

看看[**這個例子**]（http://jsfiddle.net/simurai/CGmCe/light/）。它使用步驟和'from/to'來完成它的動畫。 – David

當您使用多個關鍵幀設置動畫時，計時功能（在本例中爲步驟）適用於一個關鍵幀和下一個關鍵幀之間的轉換。

所以，即使它似乎很奇怪，CSS的應該是

#ryu { 
    -webkit-animation: dance 8s steps(1) infinite; 
    animation: dance 8s steps(1) infinite; 
}

也就是說，只有一步

fiddle

來源

2014-04-23 19:24:54 vals

這真棒，它的工作！謝謝你向我解釋，現在它是有道理的:) – Superman2971

它幫助的好主意！ – vals

爲什麼我的CSS sprite看起來像一個老電影？

回答

相關問題