推特喜欢的动画

by gothic

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%;
}
@keyframes heart-burst {
 from {background-position:left;}
 to { background-position:right;}
}
.heart {
  animation: heart-burst 1s infinity;
}
.is_animating {
  animation: heart-burst .8s steps(28) 1;
}
.heart:hover {
 background-position:right;
}
.heart.checked {
   background-position:right;
}

JavaScript

$(function() {
$('.heart').on('click', function(){
  $(this).toggleClass('is_animating');
  $(this).addClass('checked')
});
$('.heart').on('animationend', function(){
  $(this).toggleClass('is_animating');
})
})