CSS动画onclick和reverse next onclick

我使用精灵表和关键帧在按钮上单击图像时为其设置动画

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

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

小提琴：

JS:

CSS:

---

制作一个计数器变量，用于检查按钮是否被单击。 并根据计数器值向元素添加类，例如：

 var counter=0;
 $('.btn').on('click',function(){
  if(counter=0)
   {
     $('.hi').addClass('animate-hi');
     counter = 1;
   }
  else
   {
        counter = 0;
       $('.hi').removeClass('animate-hi');
   }
 });

---

确保在函数外部声明计数器变量。否则每次将其值初始化为0。

请确保您使用的是支持动画的浏览器。对我来说，这在Firefox中有效

以下内容可能正是您想要的：

代码：

函数animateButton（）{
var按钮=$（'.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'）；
}否则{
addClass（'animate-hi'）；
}
};
$（文档）.ready（函数（）{
$（'.hi'）。在（“单击”，函数（）上）{
动画按钮（）；
});
});
。您好{
宽度：50px；
高度：72px；
背景图像：url（“http://s.cdpn.io/79/sprite-steps.png");
}
.动画嗨{
动画：播放2个步骤（10）；
}
.为hi反转设置动画{
动画：播放反向2s步骤（10）；
}
@关键帧播放{
从{
背景位置：0px；
}
到{
背景位置：-500px；
}
}
@关键帧反向播放{
从{
背景位置：-500px；
}
到{
背景位置：0px；
}
}

我在这里尝试过：但是添加类并不能触发动画。太好了，谢谢。正如我提到的，我希望第一次点击后的结束图像是精灵表上的最后一个图像，我已经编辑了你的小提琴，以添加它，以防其他人需要它：你需要包括不同浏览器的WebKit。我把你的代码弄乱了，并做了一些我自己的东西。是的，我知道，为了简单起见，我把这些都忘了。
.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; }
}

 var counter=0;
 $('.btn').on('click',function(){
  if(counter=0)
   {
     $('.hi').addClass('animate-hi');
     counter = 1;
   }
  else
   {
        counter = 0;
       $('.hi').removeClass('animate-hi');
   }
 });