jquery - 单击它时像按钮一样动画

Question

我想要一些动画，例如 Twitter 的“赞”按钮。我从 Twitter 截图了。这是它的动画中的一些图像:

1:

2:

3:

你知道有什么好的 jQuery 库或 CSS3 库可以像这样使用动画吗？

Answer 1

HTML:

<div class="heart"></div>

CSS:

.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

 .heart:hover {
  background-position:right;
 }

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }

JavaScript:

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});

检查 fiddle :https://fiddle.jshell.net/0yyegtv9/