CSS动画如何停止

CSS动画如何停止

在CSS中，可以通过以下几种方式停止动画：

1. 使用 animation-play-state

animation-play-state 属性可以控制动画的播放状态。将其设置为 paused 可以暂停动画。

.element {
  animation: slide 2s infinite; /* 定义动画 */
}

.element.paused {
  animation-play-state: paused; /* 暂停动画 */
}

示例：

<div class="element"></div>
<button onclick="toggleAnimation()">暂停/播放</button>

<script>
  function toggleAnimation() {
    const element = document.querySelector('.element');
    element.classList.toggle('paused');
  }
</script>

2. 移除动画

通过移除 animation 属性或将其设置为 none 可以完全停止动画。

.element {
  animation: slide 2s infinite; /* 定义动画 */
}

.element.stopped {
  animation: none; /* 停止动画 */
}

示例：

<div class="element"></div>
<button onclick="stopAnimation()">停止动画</button>

<script>
  function stopAnimation() {
    const element = document.querySelector('.element');
    element.classList.add('stopped');
  }
</script>

3. 使用 JavaScript 控制

通过 JavaScript 动态修改样式，可以更灵活地控制动画的播放和停止。

示例：

<div class="element"></div>
<button onclick="stopAnimation()">停止动画</button>

<script>
  function stopAnimation() {
    const element = document.querySelector('.element');
    element.style.animation = 'none'; // 停止动画
  }
</script>

4. 使用 @keyframes 控制

通过调整 @keyframes 中的关键帧，可以让动画在某一帧停止。

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.element {
  animation: slide 2s infinite;
}

.element.stopped {
  animation: slide 2s forwards; /* 动画停止在最后一帧 */
}

示例：

<div class="element"></div>
<button onclick="stopAnimation()">停止动画</button>

<script>
  function stopAnimation() {
    const element = document.querySelector('.element');
    element.classList.add('stopped');
  }
</script>

5. 使用 transition 替代动画

如果动画效果可以通过 transition 实现，可以使用 transition 并动态移除属性来停止动画。

.element {
  transition: transform 2s;
}

.element.moved {
  transform: translateX(100px);
}

示例：

<div class="element"></div>
<button onclick="stopAnimation()">停止动画</button>

<script>
  function stopAnimation() {
    const element = document.querySelector('.element');
    element.style.transition = 'none'; // 停止过渡
    element.style.transform = 'translateX(0)'; // 重置位置
  }
</script>

6. 示例代码

以下是一个完整的示例，展示如何通过按钮控制动画的播放和停止：

<div class="element"></div>
<button onclick="toggleAnimation()">暂停/播放</button>
<button onclick="stopAnimation()">停止动画</button>

<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
  }

  .element {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    animation: slide 2s infinite;
  }

  .element.paused {
    animation-play-state: paused;
  }

  .element.stopped {
    animation: none;
  }
</style>

<script>
  function toggleAnimation() {
    const element = document.querySelector('.element');
    element.classList.toggle('paused');
  }

  function stopAnimation() {
    const element = document.querySelector('.element');
    element.classList.add('stopped');
  }
</script>

总结

• 使用 animation-play-state: paused 暂停动画。
• 使用 animation: none 停止动画。
• 通过 JavaScript 动态控制动画的播放和停止。
• 结合 @keyframes 或 transition 实现更灵活的效果。

根据需求选择合适的方法即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github