animation-play-state 不支持 CSS 变量，只能取 running 或 paused 字面量；用变量控制 animation-delay 并配合类名切换（如 .anim-running/.anim-paused）才是可靠方案。
直接用 animation-play-state 配合 CSS 变量就能控制播放/暂停，但变量不能直接绑定到该属性上——它不接受变量值。真正可行的方案是：用变量控制 animation-delay 和动画是否“生效”，再通过类名切换触发状态变更。
为什么不能直接用 var() 设置 animation-play-state？
animation-play-state 只接受字面量 running 或 paused，不支持 CSS 变量注入。试图写成 animation-play-state: var(--state); 会导致整个 animation 声明失效（浏览器忽略该行）。这是规范限制，不是兼容性问题。
常见错误现象：
- 加了
var(--play-state)后动画完全不播 - DevTools 中看到
animation-play-state被划掉（invalid value） - 其他
animation-*属性也一并失效
用 CSS 变量控制 animation-delay 的实际写法
这是最稳定、最常被低估的技巧：animation-delay 支持 calc() 和 var()，能实现动态延迟调度。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 响应式 stagger 动画：小屏延迟减半，大屏按原节奏
- 主题切换时调整入场节奏（比如暗色模式下动画更舒缓）
- 用户偏好设置（如“减少动画”开启后，把所有
--delay设为0s）
示例：
:root {
--base-delay: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
:root { --base-delay: 0s; }
}
.card {
animation: fadeIn 0.4s ease-out calc(var(--base-delay) * 2);
}注意：calc() 内部必须是同单位运算，var(--base-delay) * 2 合法，但 var(--base-delay) + 10ms 会失败。
用类名 + 变量组合模拟“运行时状态切换”
本质是把状态逻辑从 CSS 属性移到类名上，变量只负责参数，不越界管状态。
推荐结构：
- 定义基础动画：用
@keyframes描述完整行为（含起止） - 用
:root或组件级选择器定义变量，如--anim-duration、--anim-delay - 准备两套类名：
.anim-running（带完整animation声明）和.anim-paused（仅设animation-play-state: paused） - JS 切换类名，CSS 变量只影响数值，不参与状态判断
这样既保持 CSS 的声明式优势，又避免 JS 直接操作内联样式带来的维护难题。
最容易被忽略的一点：当多个元素共用同一组变量控制延迟时，务必确认它们的父容器没有意外重置 animation-fill-mode ——否则 forwards 失效会导致动画终态丢失，看起来像“没执行完就停了”。
