李姝妍,六合内部玄机,中国健康观察网
先定义好动画效果通过类名的增加达到样式的出现
我们播放动画时,如要暂停动画,就要用到animation-play-state
这个属性。animation-play-state
属性有两个值:
paused: 暂停动画; running: 继续播放动画;
当然去掉animation-play-state
,也可以继续播放动画。
播放与重新开始的解决办法
对于元素取多个类名,通过类名的删除,替换
注意点:这里不能删除和添加类名为同一个
,而且动画要同一效果,不同动画名称
.不然动画效果无法重置
<div id="box" class="box"></div> <p id="text"></p> <div class="control"> <button id="play" value="播放">播放</button> <button id="pause" value="暂停">暂停</button> <button id="restart" value="重新开始">重新开始</button> </div> <style> @keyframes mymove { 0% { margin-left: 0px; } 50% { margin-left: 400px; } 100% { margin-left: 0px; } } @keyframes mymove1 { 0% { margin-left: 0px; } 50% { margin-left: 400px; } 100% { margin-left: 0px; } } .box { margin: 50px 0; width: 100px; height: 100px; background-color: #5578a2; } .play { animation: mymove 5s infinite ease; } .restart { animation: mymove1 5s infinite ease; } .pause { animation-play-state: paused; } </style> <script> var play = 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 = 'pause play box'; } else { box.classname = 'pause restart box'; } text.innerhtml = this.value; }); play.addeventlistener('click', function() { if (box.classlist.contains('play')) { box.classname = 'play box'; } else { box.classname = 'restart box'; } text.innerhtml = this.value; }); restart.addeventlistener('click', function() { if (box.classlist.contains('play')) { box.classname = 'restart box'; } else { box.classname = 'play box'; } text.innerhtml = this.value; }); </script>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论