CSS關鍵幀動畫類似於停止運動

Question

我需要使用關鍵幀動畫來移動精靈表的背景位置。不過，我不想動畫，我想要一個一幀一幀的強硬幀，類似於一個gif。

任何想法如何實現這一目標？

非常感謝！

Answer 1

是的，但你可以更漂亮做到這一點，用JavaScript

CSS：

@-webkit-keyframes sprite { 
    0% { background-position: 0px 0px; } 
    25% { background-position: 0px 0px; } 
    25.1% { background-position: -200px 0px; } 
    50% { background-position: -200px 0px; } 
    50.1% { background-position: -400px 0px; } 
    75% { background-position: -400px 0px; } 
    75.1% { background-position: -400px -200px; } 
    99.9% { background-position: -400px -200px; } 
    100% { background-position: 0px 0px; } 
} 
@-moz-keyframes sprite { 
    0% { background-position: 0px 0px; } 
    25% { background-position: 0px 0px; } 
    25.1% { background-position: -200px 0px; } 
    50% { background-position: -200px 0px; } 
    50.1% { background-position: -400px 0px; } 
    75% { background-position: -400px 0px; } 
    75.1% { background-position: -400px -200px; } 
    99.9% { background-position: -400px -200px; } 
    100% { background-position: 0px 0px; } 
} 
@-o-keyframes sprite { 
    0% { background-position: 0px 0px; } 
    25% { background-position: 0px 0px; } 
    25.1% { background-position: -200px 0px; } 
    50% { background-position: -200px 0px; } 
    50.1% { background-position: -400px 0px; } 
    75% { background-position: -400px 0px; } 
    75.1% { background-position: -400px -200px; } 
    99.9% { background-position: -400px -200px; } 
    100% { background-position: 0px 0px; } 
} 
@keyframes sprite { 
    0% { background-position: 0px 0px; } 
    25% { background-position: 0px 0px; } 
    25.1% { background-position: -200px 0px; } 
    50% { background-position: -200px 0px; } 
    50.1% { background-position: -400px 0px; } 
    75% { background-position: -400px 0px; } 
    75.1% { background-position: -400px -200px; } 
    99.9% { background-position: -400px -200px; } 
    100% { background-position: 0px 0px; } 
} 

div.image { 
    background: url('http://bponline.amcham.gr/wp-content%5Cuploads/2011/12/out_of_the_box.jpg'); 
    width: 200px; 
    height: 200px; 
    -webkit-animation: 5s sprite infinite; 
    -moz-animation: 5s sprite infinite; 
    -o-animation: 5s sprite infinite; 
    animation: 5s sprite infinite; 
} 

HTML：

<div class='image'></div> 

演示：http://jsbin.com/obunen/1/edit

Answer 2

如果你真的需要使用關鍵幀動畫只有一個來到我的頭是做的想法：

@keyframes youranim 
{ 
0% {top:0px;} 
24.99% {top:0px;} 
25% {top:200px;} 
49.99% {top:200px;} 
50% {top:400px;} 
74.99% {top:400px;} 
75% {top:600px;} // and so on... 
} 

我紅認爲，十進制值是OK的CSS3關鍵幀。

Answer 3

的關鍵是CSS時機-功能。停止動作幀對應於步進功能。

animation-timing-function:steps(n); 

[代碼示例：CSS定格動畫] https://groups.google.com/d/msg/css-animation-art/d6Y83Sv8M4g/yyTAG7oK160J

[演示] http://webchain.oreilly.tw/boohover/csslabs/properties/css-animate-effect-1.html#stop-motion-animation