Style animationPlayState 属性

语法

animationPlayState 属性的语法如下：

animation-play-state: paused | running;

• paused：动画被暂停，停止播放。
• running：动画正在运行，继续播放。

示例

假设我们有一个简单的动画效果，让一个元素在页面加载时向右移动：

// www.javascriptcn.com code example
@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

在上面的示例中，我们定义了一个名为 moveRight 的关键帧动画，让元素从左向右移动。然后通过 animation-play-state: running; 来设置动画的播放状态为运行，使动画在页面加载时就开始播放。

如果我们希望用户点击元素时暂停动画，可以通过 JavaScript 来实现：

// www.javascriptcn.com code example
const element = document.querySelector('.element');

element.addEventListener('click', function() {
  if (element.style.animationPlayState === 'running') {
    element.style.animationPlayState = 'paused';
  } else {
    element.style.animationPlayState = 'running';
  }
});

在上面的示例中，我们通过监听元素的点击事件来切换动画的播放状态，当动画正在运行时点击元素，动画会被暂停；再次点击元素，动画会继续播放。

结语

通过 animationPlayState 属性，我们可以方便地控制动画的播放状态，实现更加灵活多样的动画效果。在实际项目中，可以根据具体需求来灵活运用这一属性，为网页增添更加生动丰富的交互效果。