animation-play-state - 播放状态

控制动画的播放和暂停

语法说明

animation-play-state: running | paused;
  • running - 动画正在运行（默认值）
  • paused - 动画已暂停
  • 常用于创建可交互的动画效果

示例 1：悬停暂停动画

鼠标悬停在旋转的圆圈上，动画会暂停

悬停我暂停

/* 定义旋转动画 */
.spinner {
  animation: spin 1s linear infinite;
}

/* 悬停时暂停动画 */
.spinner:hover {
  animation-play-state: paused;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

示例 2：按钮控制动画

点击按钮控制动画的播放和暂停

/* CSS */
.box {
  animation: moveAround 3s ease-in-out infinite;
}

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

/* JavaScript */
function pauseAnimation() {
  box.classList.add('paused');
}

function playAnimation() {
  box.classList.remove('paused');
}

示例 3：暂停多个动画

一个元素可以有多个动画，暂停时会同时暂停所有动画

旋转 + 脉冲
悬停暂停

/* 多个动画 */
.box {
  animation:
    rotate360 2s linear infinite,
    pulse 1.5s ease-in-out infinite;
}

/* 悬停时暂停所有动画 */
.box:hover {
  animation-play-state: paused;
}

💡 重要说明：

  • 暂停位置：动画会在当前位置暂停，不会重置
  • 多个动画：如果元素有多个动画，会同时暂停/播放所有动画
  • 常见用法：悬停暂停 :hover { animation-play-state: paused; }，或通过 JavaScript 添加/移除类名控制

💡 重要说明：

  • 暂停位置：动画会在当前位置暂停，不会重置
  • 多个动画：如果元素有多个动画，会同时暂停/播放所有动画
  • 常见用法：悬停暂停 :hover { animation-play-state: paused; }，或通过 JavaScript 添加/移除类名控制

常见应用场景

⏳

加载动画

查看完整实现 →

完整示例

/* 轮播图自动播放 */
.carousel {
  animation: slide 10s ease-in-out infinite;
}

/* 悬停时暂停 */
.carousel:hover {
  animation-play-state: paused;
}

/* 尊重用户的动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .carousel {
    animation-play-state: paused;
  }
}