animation-play-state 不能单独控制单个动画暂停，仅作用于元素整体所有动画；需拆分dom或用js的getanimations()手动管理。
hover 触发 CSS 动画的关键是用 :hover 控制 animation-play-state
直接在元素上写 animation 会导致页面加载就播放，必须把动画设为暂停态，再通过 :hover 恢复。核心不是“加动画”，而是“切播放状态”。animation-play-state: paused 是默认值，但显式声明更可靠，尤其在 Safari 中容易忽略隐式行为。
常见错误是只写 animation: slideIn 0.3s 在 hover 里，结果鼠标移入时动画重播（而非从头开始），或者移出后动画还在继续。正确做法是：
- 基础样式中设置
animation-play-state: paused和完整的animation属性（含名称、时长、填充模式等） -
:hover里只改animation-play-state: running，不重复定义整个动画 - 用
animation-fill-mode: forwards确保动画结束后保持末帧状态（否则悬停结束会跳回初始态）
Tab 元素结构决定动画是否“只悬停时播放”
如果 Tab 是 <button></button> 或带 role="tab" 的 <div>，动画目标通常是它的子元素（比如下划线、指示条、图标），而不是 Tab 本身整体位移——否则会影响可访问性与布局流。所以动画常作用于伪元素或绝对定位的 <code><span class="indicator"></span>。
示例：一个底部滑入的下划线指示器
.tab {
position: relative;
animation: none;
animation-play-state: paused;
animation-fill-mode: forwards;
}
.tab::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
animation: slideInUnder 0.3s ease-out;
animation-play-state: paused;
animation-fill-mode: forwards;
}
.tab:hover::after {
animation-play-state: running;
}
注意：animation: none 在基础态清空所有动画继承，避免父级样式干扰；::after 的动画必须单独控制，不能依赖父级 hover 触发。
Chrome/Safari 对 animation-play-state 的兼容性差异
Safari 15.4+ 才完全支持在伪元素上用 animation-play-state 控制独立动画；旧版 Safari 可能忽略 ::after:hover 中的状态切换，导致动画不触发。稳妥方案是把指示器抽成真实 DOM 子节点，并用 JS 监听 mouseenter 切 class：
- 纯 CSS 方案优先用
transform+transition替代animation，例如width或transform: scaleX()配合transition - 若必须用
@keyframes，在 Safari 下测试animation-play-state是否生效，不生效时降级为transition - 不要在
:hover中写animation: name 0.3s—— 这会强制重置动画，导致多次悬停反复从头播
为什么不用 JavaScript 控制更简单？
当 Tab 有多个状态（选中/禁用/悬停）、动画需与 JS 逻辑联动（比如点击后保持高亮），CSS :hover 就不够用了。此时用 JS 添加 is-hovering class 更可控：
tab.addEventListener('mouseenter', () => tab.classList.add('is-hovering'));
tab.addEventListener('mouseleave', () => tab.classList.remove('is-hovering'));
对应 CSS 写 .tab.is-hovering .indicator { animation-play-state: running; }。这样能避免 :hover 在触摸设备上残留、与 focus 状态冲突等问题。移动端 Tab 基本不该依赖 hover 动画。
真正容易被忽略的是：动画是否该在移出时反向播放。CSS 不支持自动反向，animation-direction: reverse 只影响单次循环方向，不是“撤回”。如需收起效果，得另写一套反向动画或改用 transition。
