拟态开关 CSS3 精灵动画只有一半的时间有效答案

【问题标题】：Skeuomorphic switch CSS3 sprite animation only works half the time拟态开关 CSS3 精灵动画只有一半的时间有效
【发布时间】：2013-01-13 04:22:47
【问题描述】：

我的精灵动画在奇数点击 (1, 3, 5 ...) 上完美运行，这将开关置于向下位置，但我无法获得偶数点击 (2, 4, 6...)触发将开关置于向上位置的动画。跨浏览器 CSS 从帖子中删除但在 Fiddle 中。

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; }
}

【问题讨论】：

你为什么使用div？为什么不使用button（或至少使用 ARIA 角色）？一个button被点击，输入类型提交，图像和按钮和链接； div 不是
是的，我可以使用按钮而不是 div，但您的评论与我的问题无关。将其切换出来不会使动画的工作方式有所不同。
我不是在回答你的问题，而是在评论你的代码。这就是为什么我在 SO 问题下使用评论部分而不是“你的答案”部分。

标签： jquery css-sprites css-animations

【解决方案1】：

我联系了启发最初代码的人来帮助我解决问题。 s-up 类需要包含播放和反向动画。谢谢http://simurai.com/。

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

小提琴：

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

【讨论】：