控制css3动画暂停播放、暂停继续播放

css3动画暂停主要用到animation-play-state属性

animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

代码

复制下面代码

<template>
  <div class="box"></div>
  <button @click="play">播放</button>
  <button @click="stop">暂停</button>
</template>

<script setup>
const play=()=>{
 document.querySelector(".box").style.animationPlayState = ""; // animationPlayState 为空时继续播放
}
const stop=()=>{
 document.querySelector(".box").style.animationPlayState = "paused"; // animationPlayState 为paused时暂停
}

</script>

<style lang="less" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: boxanimation 3s linear infinite;
}

@keyframes boxanimation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(300px);
  }

  100% {
    transform: translateX(0);
  }
}
</style>

效果

css3动画暂停播放、暂停继续播放