[分享]css3控制动画暂停

CSS3控制动画暂停功能在Web开发中非常重要，它可以实现页面动画的暂停和继续播放，提升用户的交互体验。下面需要用到的属性有animationplaystate。/ 定义动画 / keyframes ...

CSS3控制动画暂停功能在Web开发中非常重要，它可以实现页面动画的暂停和继续播放，提升用户的交互体验。下面需要用到的属性有animation-play-state。

/* 定义动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 应用动画 */
.element {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

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

通过animation-play-state属性可以实现控制动画的暂停和继续播放。它有两个可选值：paused和running，分别表示暂停和继续播放。需要注意的是，当一个元素同时应用多个动画时，需要分别给每个动画添加animation-play-state属性。

在使用过程中，可以通过JavaScript来实现控制动画暂停的功能。比如，可以给页面上的按钮添加点击事件，当用户点击按钮时，通过添加或移除元素的class来切换动画的播放状态。

// 获取元素
var element = document.getElementById('element');

// 监听按钮点击事件
var button = document.getElementById('button');
button.onclick = function() {
  // 切换动画状态
  if (element.classList.contains('pause')) {
    element.classList.remove('pause');
  } else {
    element.classList.add('pause');
  }
} 

通过上述代码，当用户点击按钮时，会给元素添加或移除pause类，从而控制动画的暂停和继续播放。