一.使用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
未完待续。。。
