Use frame animation for Twitter Like animation

Codepen. IO/Chrismabry /…

Animation effects

Realize the principle of

Use a background image, make each frame of the animation a picture of the image, and use keyframes to switch the background-position position to play the animation.

The background image

The HTML code

<div class="heart"></div>
Copy the code

CSS code

.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%;
  margin: 0 auto;
}

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

.is_animating {
  /** Steps (28) **/ steps(28) **/
  animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
  from {background-position:left; }to { background-position:right;}
}
Copy the code

Js code

  // Need to introduce jquery(or use native JS to manipulate the DOM toggle style)
  $(".heart").on('click touchstart'.function(){$(this).toggleClass('is_animating');
  });
  $(".heart").on('animationend'.function(){$(this).toggleClass('is_animating');
  });
Copy the code