CSS3 Sprite動畫無補間

Question

閱讀下面的我的最終編輯！

是否有可能使用CSS3動畫而不在幀間動畫補間？

例如，我有一個圖像，我有兩個角色動畫精靈。它們均勻間隔50px。當我使用下面的動畫時，我仍然會得到一個補間（儘管速度非常快，所以它可能看起來像閃爍）。

#ball .animated{ 
     -webkit-animation-name: animate; 
     -webkit-animation-duration: .5s; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-direction: alternate; 
     -webkit-animation-timing-function: linear;} 
@-webkit-keyframes animate{ 
     0%{-webkit-transform: translate3d(0,0,0);} 
     49%{-webkit-transform: translate3d(0,0,0);} 

     50%{-webkit-transform: translate3d(-50px,0,0);} 
     100%{-webkit-transform: translate3d(-50px,0,0);} 

因此，基於上述內容，精靈幀應當被保持在圖像（X = 0像素）的持續時間的第一0-49％的第一部分，然後跳轉到的第二部分圖像（x = -50px）爲50-100％。但是，1％的差異仍然足以在視覺上看到從0到-50px的補間。

想法？

編輯：

-webkit-animation-timing-function: cubic-bezier(1,0,1,0); 

上面似乎撫平了一點，但過了一段時間，又回到閃爍。

編輯： 我沒有意識到你可以使用百分比的小數。關閉1％的差距縮小到0.1％，將創建一個更快吐溫這只是不可見;從我

0%{-webkit-transform: translate3d(0,0,0);} 
49.9%{-webkit-transform: translate3d(0,0,0);} 

50%{-webkit-transform: translate3d(-50px,0,0);} 
100%{-webkit-transform: translate3d(-50px,0,0);} 

最後編輯！： 好了，（用-webkit-animation-duration: < 1S）發現web-kit動畫百分比將接受小數點後第百位（即0.0001）。在相對較快的動畫計時器上會產生即時翻譯。我猜想有點破解，但它的確有用。

實施例：

@-webkit-keyframes sprite { 
0% { 
    -webkit-transform: translate3d(0,0,0); 
} 
50% { 
    -webkit-transform: translate3d(0,0,0); 
} 
50.0001%{ 
    -webkit-transform: translate3d(-50px,0,0); 
} 
100%{ 
    -webkit-transform: translate3d(-50px,0,0); 
} 
} 

上面的例子是100像素（圖像上的每個子畫面是50像素寬）與width: 50px和overflow:hidden到僅div容器內示出了一個子畫面關閉圖像在圖像的一次。

注意：我正在使用translate3d，因爲它在移動瀏覽器中進行了硬件加速，其中translateX，translateY，translateZ尚未硬件加速。

Answer 1

CSS動畫的總體思路是，動畫。如果你想讓事情從一個位置跳到另一個位置，那麼你可能只考慮通過JavaScript直接設置位置，並用JavaScript來做迭代。

但是，如果你確實想使用動畫，你有幾個選擇。一種是將不透明度設置爲零，然後回到具有兩個填充關鍵幀的透明度。或者在翻譯發生的時候改變z-index來隱藏遮罩div後面的動畫對象。 z-indexes不會補間。

更新：階段函數轉換已被添加到規範，現在在Chrome中實現，所以現在你想做什麼是可能的。

Answer 2

自問這個問題已經有一段時間了，但CSS3現在有一個步定時功能，所以我用它來做精靈動畫。從我codepen例如在http://codepen.io/natedsaint/pen/2/7：

/* Animation keyframes */ 
@keyframes walk { 
    0% { background-position:0px 0px;} 
    16.67% { background-position:-104px 0px;} 
    33.33% { background-position:-208px 0px;} 
    50% {background-position:-320px 0px;} 
    66.66% { background-position:-416px 0px;} 
    80.65% { background-position:-520px 0px;} 
    100% { background-position:-624px 0px;} 
} 

#guyBrush { 
    animation: walk infinite 1s steps(1,end); 
    background-image:url('http://www.nathanstpierre.com/gb_walk.png'); 
    width:104px; 
    height:152px; 
    position:absolute; 
    top:160px; 
    left:360px; 
} 

這樣做的好處是，你可以通過改變動畫的持續時間，以一個較低的數字改變速度。我已經實現了一個滑塊來顯示這個。

Answer 3

這是另一個很好的例子，使用steps()。

這是一個簡單而強大的動畫精靈。下面有一個老公爵揮舞着的動畫。

@keyframes wink { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://i.stack.imgur.com/1Ad8o.png"); 
 
    margin: 0 auto;  
 
    animation: wink .8s steps(10, end) infinite; 
 
}

<img src="http://i.stack.imgur.com/1Ad8o.png"> 
 
<div class="hi"></div>

有一個演示中，你可以與cssdeck玩。