单击按钮时像按钮一样动画答案

【问题标题】：Animate like button when click on it单击按钮时像按钮一样动画
【发布时间】：2016-06-12 03:56:02
【问题描述】：

我想要一些动画，比如 Twitter 的 Like button 。我从 Twitter 截取了屏幕截图。这是它的动画中的一些图像：

1：

2：

3：

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

【问题讨论】：

事情是这样的：codepen.io/chrismabry/pen/ZbjZEj
@NirmalyaGhosh 我真的很感激。
请将您的评论设置为答案。你知道有什么网站可以探索这样的动画吗？（codepen.io除外）
完成。您可以在 codepen 中搜索一些精彩的示例。

标签： jquery css twitter

【解决方案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');
});

检查小提琴：https://fiddle.jshell.net/0yyegtv9/

【讨论】：

【解决方案2】：

这是您正在寻找的东西： http://codepen.io/chrismabry/pen/ZbjZEj

/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
});

/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
  $(this).toggleClass('is_animating');
});

【讨论】：