使用帧动画实现Twitter的Like动画效果

445 阅读1分钟

线上代码:codepen.io/chrismabry/…

动画效果

like

实现原理

使用一个背景图片,将动画的每一帧都做成这个图片的一张图,通过keyframes切换background-position的位置来播放动画。

背景图片

like

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

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

.is_animating {
  /** 因为图片有29张,需要切换28次,所以steps(28) **/
  animation: heart-burst .8s steps(28) 1;
}

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

js代码

  // 需要引入jquery(或者使用原生JS操作dom切换样式)
  $(".heart").on('click touchstart', function(){
    $(this).toggleClass('is_animating');
  });
  $(".heart").on('animationend', function(){
    $(this).toggleClass('is_animating');
  });