當點擊它時動畫像按鈕

Question

我想要一些動畫像Twitter的Like按鈕。我從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'); 
}); 

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

Answer 2

這是你正在尋找FO的東西R： 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'); 
});