怎么暂停CSS3动画

在实现音乐播放页面时需要让一个圆进行旋转，当音乐暂停时希望圆也停止转动停留在当前时刻，当音乐播放时动画会继续进行，这里需要用到CSS3的一个新属性animation-play-state,它有两个值：

{
    	animation-play-state:paused;//暂停动画
    	animation-play-state:running;继续播放动画
}

注意：在添加上面这个属性的时候，也要添加动画属性，才能生效
示例：

//定义了动画类和暂停类
.animationStyle{
	animation:my-rotate 5s linear infinite;
}
.pause{
	animation-play-state:paused;
}
@keyframes my-rotate{
	0% { transform: rotate(0) }
 	25%{transform:rotate(90deg)}
 	50%{transform:rotate(180deg)}
 	75%{transform:rotate(270deg)}
 	100% {transform: rotate(360deg)}
}
//在进行动画播放和暂停时，需要重新设置类名实现
methods:{
	play(){
		let audio=document.querySelector("#audio");
 		let albumImg=document.querySelector("#albumImg");
 		audio.play();
 		this.animationStyle="animationStyle";
		 this.getCurrentTime();
	},
	stop(){
		let audio=document.querySelector("#audio");
 		let albumImg=document.querySelector("#albumImg");
 		audio.pause();
 		//添加pause类的同时，animationStyle也不能少
 		this.animationStyle="pause animationStyle";
	}
}