Skeuomorphic開關CSS3精靈動畫只能工作一半時間

Question

我的精靈動畫完美地完成奇怪的點擊（1,3,5 ....），使開關處於向下位置，但我無法獲得均勻點擊（ 2，4，6 ...）來啓動將開關置於上位的動畫。跨瀏覽器CSS從帖子中刪除，但在小提琴中。

http://jsfiddle.net/aNsHU/8/

HTML

<div class="switch s-up"></div> 

jQuery的

$(document).ready(function() { 

    $(".switch").click(function() { 
    $(this).toggleClass("s-down s-up"); 
    }); 

})​ 

CSS

.switch{ 
    background: transparent url(http://i.imgur.com/taIR0.jpg); 
    height:65px; 
    width: 75px; 
    margin-bottom:75px; 
    cursor:pointer; 
} 
.s-down{ 
    animation: play .4s steps(5); 
} 
.s-up{ 
    animation: reverse .4s steps(5); 
} 
.switch.s-down{ 
    background: transparent url(http://i.imgur.com/taIR0.jpg) -300px 0; 
} 


@keyframes play { 
    0% { background-position: 0px; } 
    100% { background-position: -375px; } 
} 

@keyframes reverse { 
    0% { background-position: -375px; } 
    100% { background-position: 0px; } 
}​ 

Answer 1

我接觸到啓發最初代碼的人來幫助我解決問題。 s-up類需要包含播放和反向動畫。謝謝http://simurai.com/。

.s-up{ 
    animation: play reverse .4s steps(5); 
} 

小提琴：

http://jsfiddle.net/simurai/hEfpt/