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

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

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

一.解决的本质思路

播放的解决思路

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

暂停的解决思路

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

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

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

重新开始解决思路

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

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

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

二.演示代码

<divid="box"class="box"></div><pid="text"></p><divclass="control"><buttonid="play"value="播放">播放</button><buttonid="pause"value="暂停">暂停</button><buttonid="restart"value="重新开始">重新开始</button></div><style>@keyframesmymove{0%{margin-left:0px;}50%{margin-left:400px;}100%{margin-left:0px;}}@keyframesmymove1{0%{margin-left:0px;}50%{margin-left:400px;}100%{margin-left:0px;}}.box{margin:50px0;width:100px;height:100px;background-color:#5578a2;}.play{animation:mymove5sinfiniteease;}.restart{animation:mymove15sinfiniteease;}.pause{animation-play-state:paused;}</style><script>varplay=document.getElementById('play'),pause=document.getElementById('pause'),restart=document.getElementById('restart'),text=document.getElementById('text'),box=document.getElementById('box');pause.addEventListener('click',function(){if(box.classList.contains('play')){box.className='pauseplaybox';}else{box.className='pauserestartbox';}text.innerHTML=this.value;});play.addEventListener('click',function(){if(box.classList.contains('play')){box.className='playbox';}else{box.className='restartbox';}text.innerHTML=this.value;});restart.addEventListener('click',function(){if(box.classList.contains('play')){box.className='restartbox';}else{box.className='playbox';}text.innerHTML=this.value;});</script>

关于“css3怎么解决动画的播放、暂停和重新开始”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。