Question

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

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/

Skeuomorphic开关CSS3精灵动画只能工作一半的时间

1 个答案: