animation-play-state 能暂停动画是因为它直接控制 css 动画运行状态，设为 paused 时冻结当前帧；必须作用于正在播放动画的元素本身，且需配合 @keyframes + animation 实现自动轮播，不可用 transition 替代。
animation-play-state 为什么能暂停动画
它直接控制 CSS 动画的运行状态，值为 paused 时会冻结当前帧，running 则继续播放。和 JavaScript 的 pause() / play() 类似，但纯 CSS 实现、无 JS 依赖，适合轮播图这类视觉组件。
关键点：它只对已启用的 animation 生效，且必须作用在**正在播放动画的元素本身**上（不能只写在父容器或伪类里就生效）。
轮播容器必须用 animation 而非 transition
轮播本质是循环位移（如 transform: translateX()），需要持续、自动触发的动画序列，transition 只响应属性变化，无法自驱动。必须用 @keyframes + animation 定义循环动画。
- 错误写法：
transition: transform 0.5s ease-in-out—— 没有自动轮播逻辑 - 正确写法：
animation: slide 8s infinite，配合@keyframes slide定义位移过程 - 注意：动画时长（如
8s）要覆盖完整一轮，否则暂停后恢复可能跳帧
:hover 触发 paused 必须写在动画元素上
常见错误是把 animation-play-state: paused 写在父容器或 :hover 的上级选择器里，结果不生效。必须确保悬停目标和动画目标是同一个 DOM 元素。
/* 正确：轮播图容器自身有 animation，且 :hover 直接作用于它 */
.carousel {
animation: slide 8s infinite;
}
.carousel:hover {
animation-play-state: paused;
}
如果轮播图结构是 <div class="carousel"><ul>...</ul></div>，而动画实际加在 <ul></ul> 上，那 :hover 就得写在 ul 或用 .carousel:hover ul —— 否则 animation-play-state 不会应用到动画节点。
暂停后恢复播放的细节陷阱
鼠标移出后动画自动恢复，但要注意两点：
- 动画时间轴不会重置：暂停 2s 后恢复，会从第 2s 处继续，不是从头播 —— 这是预期行为，无需额外处理
- 避免和 JS 轮播库冲突：如果同时用了 Swiper 或其他 JS 轮播，CSS 的
animation-play-state可能被 JS 动态样式覆盖，优先级需检查（内联 style > CSS 文件） - 移动端慎用：
:hover在触摸设备上不可靠，iOS Safari 甚至可能完全不触发，需搭配@media (hover: hover)条件判断
真正容易被忽略的是：动画元素若被频繁重绘（比如父容器用 transform: scale() 或 opacity 触发合成层切换），可能导致 animation-play-state 状态丢失，表现为“悬停了却不暂停”。这种情况下，得固定动画元素的合成层，例如加 will-change: transform 或 transform: translateZ(0)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
