css实现红心点赞动态效果

实现效果：

素材：

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

完整代码：

.heart