css实现红心点赞动态效果

实现效果：

素材：

思路：
逐帧动画，设置素材图片在每一帧的位置移动。 刚开始的思路是把素材图片作为动画区域的background-image，然后再通过animation来改变background-position。但是实际操作之后发现这样做实际上是平滑过渡，没有达到我想要的效果，后来了解到了steps这个函数。 steps实际上是animation-timing-function的参数，以为不连续执行动画。 steps有两个参数，第一个参数是要分布执行的步数，在本例中，我的素材图片一共有29帧，也就是说一共需要分成28次执行，所以给steps传一个28就好了。第二个参数有两个值，分别是start和end，start第一帧是第一步动画结束，end第一帧是第一步动画开始。

完整代码：

.heart {
  background: url(../../static/images/heart_animation.png);
  background-position: left;
  background-repeat: no-repeat;
  -webkit-animation-name: heartBlast;
  animation-name: heartBlast;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: steps(28);
  animation-timing-function: steps(28);
  background-position: right;
}

@-webkit-keyframes heartBlast {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@keyframes heartBlast {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}