0921自我总结

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

一.解决的本质思路

播放的解决思路

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

暂停提升面部的解决思路

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

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

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

重新开始解决思路

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

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

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

二.演示代码

<div id="box" class="box"></div>  <p id="text"></p>  <div class="control">    <button id="play" value="播放">播放</button>    <button id="pau" value="暂停">暂停</button>    <button id="restart" value="重新开始">重新开始</button>  </di环保作文300v><style>    @keyframes mymove {    0% {      margin-left: 0px;    }    50% {      margin-left: 4趣味语文00px;    }    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 ea;  }  .restart {    animation: mymove1 5s infinite ea;  }  .pau {    animati我学会了        on-play-state: paud;  }</style><script>var play = document.getelementbyid('play'),    pau = document.getelementbyid('pau'),    restart = document.getelementbyid('restart'),    text = document.getelementbyid('text'),    box = document.getelementbyid('box');  pau.addeventlistener('click', function() {    if (box.clas什么方法slist.contains('play')) {      box.classname = 'pau play box';    } el {      box.classname = 'pau restart box';    }    text.innerhtml = this.value;  });  play.addeventlistener('click', function() {    if (box.classlist.contains('play')) {      box.classname = 'play box';    } el {      box.classname = 'restart box';    }    text.innerhtml = this.value;  });  restart.addeventlistener('click', function() {    if (box.classlist.contains('play')) {      box.classname = 'restart box';    } el {      box.classname = 'play box';    }    text.innerhtml = this.value;  });</script>