一.使用transition实现
会用到steps(count, position)方法，它是一个timing function，会把过渡分成count步position的默认值是end，还可以为start。假如现在有一个动画分成5段，end会在第一段的时间执行完后才到第一段的终点即第二段的起点，一次类推执行动画，当执行到最后一段时，到达不了最后一步的终点就会到回到起点重新开始执行动画；而start是先到第一段的终点，等第一段的时间执行完后，到达第二段的终点，以此类推，能到达最后一段的终点。

思路：将动画的每一帧放在一张雪碧图中，横着排列。将雪碧图当作背景图片，初始状态显示动画的第一帧即雪碧图的第一个，点击以后改变背景的位置，达到动画的效果。

具体实现如下：

// React
<div className="stage">
     <div className={cls("heart", {'is-active': this.state.color})} onClick={this.changeColor.bind(this)}></div>
</div>

// css
.heart {
    width: 100px;
    height: 100px;
    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
  }
  
.is-active {
    background-position: -2800px 0;
    transition: background-position 1s steps(28);
}

.stage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

效果图：

dianzan.gif

未完待续。。。