@keyframes 中不能使用 var() 是 css 规范硬性限制，含 var() 的声明会被静默忽略；正确做法是将变量定义在 :root 或元素上，并在元素的 animation-duration 属性中引用，且必须提供 fallback 值。
直接用 animation-duration: var(--speed) 就能控制旋转速度，但必须避开 @keyframes 里写变量这个死胡同——浏览器规范禁止解析，写了也白写。
为什么 @keyframes 里不能用 var(--speed)
这不是兼容性问题，是 CSS 规范硬性限制：@keyframes 块内所有含 var() 的声明（比如 transform: rotate(var(--deg)) 或 animation-duration: var(--dur)）会被整条静默忽略。动画会退回到默认值，比如 animation-duration: 0s 导致不转，或 animation-timing-function: ease 打乱原本的 linear 匀速效果。
常见错误现象：
- 改了
--speed变量但图标完全不动 - 旋转忽快忽慢、卡顿、跳帧
- 开发工具里看到
animation-duration显示为invalid value
animation-duration 必须绑定在元素上，不是关键帧里
正确路径只有一条：把变量定义在元素（或其祖先）上，然后在该元素的 animation-duration 属性里用 var() 引用。
- 变量定义位置要能被继承或级联，推荐挂到
:root或组件根元素上，比如:root { --loading-speed: 0.8s; } - 元素上必须显式写
animation-duration: var(--loading-speed, 1.2s);，1.2s是 fallback，没定义变量时不至于变成0s导致动画消失 - 别用
animation简写，比如animation: spin var(--speed) linear infinite—— 缺少任意一项（如iteration-count）会导致整条简写失效 - 单位必须统一，
var(--speed, 800ms)和var(--speed, 0.8s)都合法，但混用容易在 JS 动态修改时出错
JS 动态调速时要注意的三个时机点
用 JS 改 --loading-speed 变量本身很简单，但实际效果是否生效，取决于你改的位置和时机。
- 改
document.documentElement.style.setProperty('--loading-speed', '0.4s')是最直接方式，但得确保目标元素的animation-duration确实绑定了这个变量 - 如果元素刚插入 DOM 就立刻改变量，可能样式还没计算完成，动画不会响应——建议加个
requestAnimationFrame或setTimeout(..., 0)延迟一帧 - 媒体查询覆盖变量（比如
@media (max-width: 480px) { :root { --loading-speed: 1.5s; } }）优先级高于 JS 设置，容易被意外覆盖，检查 DevTools 的 Computed 标签页确认最终生效值
真正麻烦的不是怎么写，而是变量作用域和 fallback 是否兜得住——漏掉 fallback 或变量定义层级不对，动画就悄无声息地停了，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
