CSS动画onclick并反转下一个onclick

Question

单击按钮时，我正在使用Spritesheet和关键帧对按钮上的图像进行动画处理。

单击按钮时，我希望帧沿一个方向运行，并将按钮保留在Spritesheet中的最后一个图像上；再次单击按钮时，我希望相同的帧向后运行，将按钮保留在第一个图像上精灵表。

我目前正在尝试使用jquery在单击该按钮时将按钮上的类更改为动画类，但这似乎不起作用。

小提琴：http : //jsfiddle.net/CGmCe/10295/

JS：

function animate(){
    $('.hi').addClass('animate-hi');
}

CSS：

.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}

.animate-hi {
    animation: play 2s steps(10);
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

Answer 1

确保您使用的是具有动画功能的浏览器。对我来说，这适用于Firefox。

以下可能正是您想要的：

http://jsfiddle.net/CGmCe/10299/

码：

function animateButton() {
  var button = $('.hi');
  if (button.hasClass('animate-hi')) {
    button.removeClass('animate-hi').addClass('animate-hi-reverse');
  } else if (button.hasClass('animate-hi-reverse')) {
    button.removeClass('animate-hi-reverse').addClass('animate-hi');
  } else {
    button.addClass('animate-hi');
  }
};
$(document).ready(function() {
  $('.hi').on("click", function() {
    animateButton();
  });
});

.hi {
  width: 50px;
  height: 72px;
  background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}

.animate-hi {
  animation: play 2s steps(10);
}

.animate-hi-reverse {
  animation: play-reverse 2s steps(10);
}

@keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -500px;
  }
}

@keyframes play-reverse {
  from {
    background-position: -500px;
  }
  to {
    background-position: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<button class="hi" type="button"></button>