jquery - 拟态开关 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/