CSS动画不支持条件触发，依赖DOM状态、伪类或JS操作class等外部控制；:hover/:focus/:checked切换、JS增删class、display显隐变化、@keyframes名称变更可触发动画；常见失败因play-state暂停、动画名错误、delay延迟、fill-mode缺失或优先级冲突。
CSS 动画本身不支持“条件触发”——animation 一旦声明并满足播放条件（如元素存在、样式生效），就会按规则自动启动。所谓“条件”，实际依赖外部控制：DOM 状态、伪类、JavaScript 操作 class 或内联样式等。
哪些 CSS 状态能间接触发动画
CSS 动画的“触发点”本质是样式变更被浏览器检测到并进入渲染流程。以下状态变化可引发重绘+动画启动：
-
:hover、:focus、:checked等伪类切换时，若对应规则中包含animation或animation-name，动画会执行 - 通过 JavaScript 添加/移除 class，且该 class 定义了
animation属性（注意：仅添加 class 不足以触发，需确保该 class 的动画属性与之前不同） - 元素从
display: none变为可见（如display: block），但此时需配合animation-fill-mode: forwards或重排机制，否则可能跳过首帧 -
@keyframes名称变更（例如从spin改为bounce）也会触发新动画，但极少手动这么做
为什么直接写 animation: spin 1s 却不播放
常见静默失败原因不是语法错，而是触发链断裂：
- 父元素或自身有
animation-play-state: paused，且未显式设为running - 动画名拼写错误，或
@keyframes未定义/未加载（检查 DevTools → Styles 面板中 animation 属性是否灰掉） - 使用了
animation-delay: 2s但误以为“立即播放”，实际在等待 - 元素初始状态已处于动画终点（如
transform: rotate(360deg)），且animation-fill-mode未设为both或forwards，导致视觉无变化 - CSS 优先级冲突：其他更高权重要求覆盖了
animation，例如某处写了animation: none
用 JavaScript 控制动画启停的可靠写法
避免操作 animation-play-state（易受层叠干扰），推荐切换 class 控制：
立即学习“前端免费学习笔记（深入）”；
.box {
animation: slide-in 0.3s ease-out;
animation-fill-mode: forwards;
}
.box.is-active {
animation-name: slide-in;
}
.box.is-paused {
animation-play-state: paused;
}
关键点：
- 始终显式声明
animation-fill-mode，否则动画结束后样式回退 - 用
animation-name而非完整animation缩写切换，防止其他子属性（如 duration）被意外重置 - 需要“重新播放”时，先移除 class，
offsetWidth强制重排，再加回 class（绕过浏览器优化）
真正难的不是“怎么让动画动起来”，而是判断它该在哪个 DOM 生命周期节点上动、动完后状态是否可预期。很多 bug 来自假设动画会“智能感知条件”，其实它只响应 CSS 声明变更——而变更是否发生，得靠你亲手确认。
