用CSS变量控制加载动画周期更优，因其支持继承、响应式覆盖和集中维护；硬编码animation-duration则导致多处修改、维护成本高。
为什么直接改 animation-duration 不如用 CSS 变量控制加载动画周期
硬编码 animation-duration: 1.2s 意味着每换一个速度就得改多处样式，尤其当同一套旋转/脉冲/骨架屏动画在按钮、卡片、列表中复用时，维护成本陡增。CSS 变量把周期抽成可继承、可响应式覆盖的值，比如 --loading-speed: 0.8s，子元素只需 animation-duration: var(--loading-speed)，父容器一改，所有后代自动同步。
关键点在于：变量必须定义在能被继承或级联的位置（如 :root 或组件根元素），且不能被 !important 或更具体的选择器意外覆盖。
- 避免在
@keyframes内部直接使用变量（不支持）——得靠变量控制时长，而非关键帧数值 - 不要用
calc()在变量值里做复杂运算（如--speed: calc(1s / var(--multiplier))），部分浏览器对变量嵌套calc兼容性差 - 移动端需注意：过短的周期（如
0.2s）可能触发 iOS Safari 的动画节流，实际表现卡顿
如何用单个变量驱动多种加载动画类型
旋转类（spin）、呼吸类（pulse）、流动类（shimmer）本质都依赖周期，但关键帧逻辑不同。统一用 --loading-duration 控制总时长，再按需调整关键帧分布比例：
/* 旋转动画：匀速转一圈 */
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-spin {
animation: spin var(--loading-duration, 1.5s) linear infinite;
}
<p>/<em> 呼吸动画：缩放 + 透明度，慢入快出更自然 </em>/
@keyframes pulse {
0%, 100% { transform: scale(0.95); opacity: 0.6; }
50% { transform: scale(1); opacity: 1; }
}
.loading-pulse {
animation: pulse var(--loading-duration, 1.5s) cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}</p>
- 所有动画统一用
var(--loading-duration, 1.5s)，提供默认值防变量未定义 - 不同动画配不同
timing-function：旋转用linear，呼吸用cubic-bezier，避免“一套缓动打天下” - 若需响应式变速（如小屏减慢），直接在媒体查询里重设变量：
@media (max-width: 480px) { :root { --loading-duration: 2s; } }
动态修改变量实现运行时变速（比如用户拖拽调节）
JavaScript 修改 style.setProperty 是最直接方式，但要注意触发时机和性能：
const loader = document.querySelector('.loading-spinner');
loader.style.setProperty('--loading-duration', '0.6s');
- 别在高频事件（如
mousemove）里反复调用setProperty，加节流或只在change/input时更新 - 变量名必须完全一致（含连字符），
--loading-duration和--loadingDuration是两个变量 - 动画会立即重播，若要平滑过渡，可在 CSS 中加
animation-duration: var(--loading-duration) 0.3s ease-out（第二个时间是过渡时长）
兼容性与降级方案怎么写才不翻车
CSS 变量在 IE 中完全不支持，但现代项目通常已放弃 IE。真正容易被忽略的是旧版 Safari（≤14.1）对变量在 @keyframes 中间接使用的限制——虽然不报错，但可能读不到值。稳妥做法是：
- 始终为变量提供默认值：
var(--loading-duration, 1.2s)，没变量时 fallback 到固定值 - 避免在
@keyframes定义块内使用变量；所有变量只用于animation简写或单独属性 - 如果必须支持 Safari 13–14，用
@supports (--loading-duration: 0s)包裹变量用法，内部写降级动画
最常被漏掉的是：变量作用域污染。多个组件共用 --loading-duration 时，一个组件改了会影响全局，建议按组件命名空间隔离，比如 --btn-loading-duration、--card-loading-duration。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
