51dev.com IT技术开发者社区

51dev.com 技术开发者社区

css3 动画的播放、暂停和重新开始

IT猿阅读(29)2019-10-30 收藏0次评论

播放

  先在@keyframes中创建动画,之后把它捆绑到某个选择器,就可以产生动画效果。
html

<div id="box" class="box"></div> 

css

@keyframes mymove {
    0% {
      margin-left: 0px;
    }
    50% {
      margin-left: 400px;
    }
    100% {
      margin-left: 0px;
    }
  }
.box {
    margin: 50px 0;
    width: 100px;
    height: 100px;
    background-color: #5578a2;
    animation: mymove 5s infinite ease;
  }

暂停

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

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

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

重新开始

  如果要重新开始动画,加载一个相同的动画,不同名字,可以达到重新开始动画的效果。
效果:

代码部分:

html

<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>

css

@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;
  }

js

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;
  });

以上就是css3 动画的播放、暂停和重新开始的全部内容。