CSS 在无限循环的CSS3动画中添加暂停

在本文中，我们将介绍如何通过CSS代码在无限循环的CSS3动画中添加暂停效果。CSS3动画是一种强大的工具，可以通过一些简单的代码创建出引人注目的网页效果。然而，在某些情况下，我们可能希望在动画播放过程中添加暂停的功能，让用户能够控制动画的播放与暂停。

阅读更多：CSS 教程

利用CSS中的animation-play-state属性

要在CSS3动画中添加暂停效果，我们可以利用CSS中的animation-play-state属性。这个属性用于控制动画的播放状态，它有两个可选值：running用于让动画正常播放，paused用于将动画暂停。

下面是一个简单的例子，演示了如何使用animation-play-state属性来实现动画的暂停效果：

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.moving-box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 3s infinite;
}

.moving-box.paused {
  animation-play-state: paused;
}

在上面的代码中，我们创建了一个名为move的关键帧动画，将一个红色的盒子从左边移动到右边。在.moving-box样式中，我们将动画设置为无限重复播放，并且使用animation-play-state属性将动画的初始状态设置为running（默认值）。同时，我们为.moving-box.paused样式添加了一个额外的规则，将动画的状态设置为paused。

为了让用户能够控制动画的暂停与播放，我们可以通过JavaScript来添加一个事件处理程序：

const movingBox = document.querySelector('.moving-box');

movingBox.addEventListener('click', function() {
  this.classList.toggle('paused');
});

在上面的JavaScript代码中，我们选择了.moving-box元素，并为其添加了一个点击事件处理程序。当用户点击该元素时，paused类将会被添加或移除，这样就可以切换动画的播放状态。

现在，我们可以在浏览器中查看这个示例并进行测试。当我们点击动画元素时，它将立即暂停或恢复播放，这给了用户一个操作的空间。

总结

通过使用animation-play-state属性，我们可以很方便地在无限循环的CSS3动画中添加暂停功能。通过给动画元素添加一个点击事件处理程序，我们可以让用户对动画进行控制。这种方法简单而有效，可以提高用户体验和交互性。希望本文对你理解CSS3动画的暂停效果有所帮助！