css3怎么解决动画的播放、暂停和重新开始

这篇文章主要介绍“css3怎么解决动画的播放、暂停和重新开始”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3怎么解决动画的播放、暂停和重新开始”文章能帮助大家解决问题。

创新互联公司专业为企业提供杜尔伯特网站建设、杜尔伯特做网站、杜尔伯特网站设计、杜尔伯特网站制作等企业网站建设、网页设计与制作、杜尔伯特企业网站模板建站服务，十余年杜尔伯特做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

一.解决的本质思路

播放的解决思路

先定义好动画效果通过类名的增加达到样式的出现

暂停的解决思路

我们播放动画时，如要暂停动画，就要用到animation-play-state这个属性。animation-play-state属性有两个值：

paused: 暂停动画;
running: 继续播放动画;

当然去掉animation-play-state，也可以继续播放动画。

重新开始解决思路

播放与重新开始的解决办法

对于元素取多个类名,通过类名的删除,替换

注意点:这里不能删除和添加类名为同一个,而且动画要同一效果,不同动画名称.不然动画效果无法重置

二.演示代码