来源http://www.vcchar.com/thread-25016-1-1.html
一个属性：animation-play-state
取值：paused（暂停）|running（播放）
hover取代点击
.stop:hover~.animation {
animation-play-state: paused;
}

checked伪类
radio标签的checked伪类，加上实现点击响应
#stop:checked ~ .animation {
animation-play-state: paused;
}
#play:checked ~ .animation {
animation-play-state: running;
}

可以使用animation-play-state属性；

• paused：暂停动画的运行；
• running：恢复动画的播放；如果是恢复一个状态为已暂停的动画，则是从动画暂停的地方开始进行播放。

使用animation-play-state属性：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。
语法：animation-play-state: paused|running;
具体案例参考