css3怎么解決動(dòng)畫的播放、暫停和重新開(kāi)始

這篇文章主要介紹“css3怎么解決動(dòng)畫的播放、暫停和重新開(kāi)始”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3怎么解決動(dòng)畫的播放、暫停和重新開(kāi)始”文章能幫助大家解決問(wèn)題。

一.解決的本質(zhì)思路

播放的解決思路

先定義好動(dòng)畫效果通過(guò)類名的增加達(dá)到樣式的出現(xiàn)

暫停的解決思路

我們播放動(dòng)畫時(shí)，如要暫停動(dòng)畫，就要用到animation-play-state這個(gè)屬性。animation-play-state屬性有兩個(gè)值：

paused: 暫停動(dòng)畫;
running: 繼續(xù)播放動(dòng)畫;

當(dāng)然去掉animation-play-state，也可以繼續(xù)播放動(dòng)畫。

重新開(kāi)始解決思路

播放與重新開(kāi)始的解決辦法

對(duì)于元素取多個(gè)類名,通過(guò)類名的刪除,替換

注意點(diǎn):這里不能刪除和添加類名為同一個(gè),而且動(dòng)畫要同一效果,不同動(dòng)畫名稱.不然動(dòng)畫效果無(wú)法重置

二.演示代碼

<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="重新開(kāi)始">重新開(kāi)始</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>

關(guān)于“css3怎么解決動(dòng)畫的播放、暫停和重新開(kāi)始”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。