欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 13:14:07
0921自我总结 css3如何解决动画的播放、暂停和重新开始 一.解决的本质思路 播放的解决思路 先定义好动画效果通过类名的增加达到样式的出现 暂停的解决思路 我们播放动画时,如要暂停动画,就要用到 这个属性。 属性有两个值: 当然去掉 ,也可以继续播放动画。 重新开始解决思路 播放与重新开始的解决 ......

0921自我总结

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

一.解决的本质思路

播放的解决思路

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

暂停的解决思路

我们播放动画时,如要暂停动画,就要用到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>