css3如何让animation动画停止

1. 什么是CSS3的animation动画

CSS3动画是CSS3的新特性，它是一组实现动画效果所需的方法和属性。它逐帧地渲染关键帧（即动画的不同阶段），并为CSS属性指定动画效果。

2. 如何让CSS3的animation动画停止

当我们需要动画停止时，可以使用CSS3中的animation-play-state属性来控制动画的播放和暂停。animation-play-state属性有两个值，paused（暂停）和running（播放），默认值为running。当属性的值为paused时，动画就会暂停。

2.1 animation-play-state属性的含义

animation-play-state属性用于控制动画的状态，有以下两个值：

running：表示动画正在播放

paused：表示动画已暂停

可以通过以下代码为动画设置animation-play-state属性：

.div{
  animation-play-state: running | paused;
}

2.2 实现动态控制animation-play-state属性的方法

除了直接设置animation-play-state属性，我们还可以通过JavaScript代码来动态控制动画的播放和暂停。

首先，我们可以通过document.querySelector()方法获取元素，然后通过style属性来设置animation-play-state属性的值，如下所示：

// 获取元素
var ele = document.querySelector(".div");
// 暂停动画
ele.style.animationPlayState = "paused";
// 恢复动画
ele.style.animationPlayState = "running";

除此之外，我们还可以使用classList.toggle()方法来动态切换该元素的类名，从而改变动画的播放状态，如下所示：

// 获取元素
var ele = document.querySelector(".div");
// 增加类名，播放动画
ele.classList.add("play");
// 切换类名，暂停动画
ele.classList.toggle("play");

3. 完整示例

下面是一个完整的CSS3动画控制示例。点击“暂停”按钮可以停止动画，点击“播放”按钮可以恢复动画。

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: move 2s linear infinite;
  }
  .play{
    animation-play-state: paused;
  }
  @keyframes move {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(200px) rotate(180deg);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>
<div class="box" id="box"></div>
<button onclick="pause()">暂停</button>
<button onclick="play()">播放</button>
<script>
  var ele = document.querySelector("#box");
  function pause(){
    ele.classList.add("play");
  }
  function play(){
    ele.classList.toggle("play");
  }
</script>

以上示例中，.play类设置animation-play-state属性的值为paused，点击暂停按钮时，通过将该类添加到.box元素上来暂停动画；点击播放按钮时，通过切换该类名的方式来恢复动画。

总结

以上就是CSS3如何让animation动画停止的方法。通过设置animation-play-state属性或JavaScript代码来动态控制动画的播放和暂停，可以实现更加灵活、生动的网页动画效果。