使用 CSS 变量 --duration 和 --easing 统一管理动画时长与缓动函数，通过 :root 定义基础值、局部覆盖实现响应式与差异化控制，避免硬编码和 calc() 动态计算，提升可维护性与视觉一致性。
用 --duration 变量替代硬编码时间值
动画时长散落在多个 animation 或 transition 声明里，改一处漏三处，是维护噩梦的起点。把时长抽成 CSS 变量，能一次性同步所有依赖项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:root里定义基础时长：:root { --duration: 0.3s; } - 所有动画统一用
animation: fade-in var(--duration) ease-out;，别写0.3s - 需要差异化时，局部覆盖变量：
.card { --duration: 0.2s; }，子元素会自动继承新值 - 避免用
calc()动态算时长（如calc(var(--duration) * 2)），部分旧版 Safari 不支持
用 --easing 统一缓动函数
不同组件用 ease、cubic-bezier(0.4, 0, 0.2, 1)、ease-in-out 混着来，视觉节奏就乱了。统一缓动函数不只是省事，更是保持交互语义一致的关键。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义常用缓动：
:root { --easing: cubic-bezier(0.4, 0, 0.2, 1); }（即 Material Design 默认） - 过渡和动画都直接引用：
transition: opacity var(--duration) var(--easing); - 慎用
step-start/step-end这类非连续缓动——它们不接受 CSS 变量传入，会被浏览器忽略 - 若需“快出慢入”，别堆两个变量，直接定义新变量：
--easing-out: cubic-bezier(0.2, 0, 0.1, 1);
动画组合时用 animation 简写 + 变量拼接
一个元素同时有位移、缩放、透明度变化，分开写 transform 和 opacity 的 transition 容易冲突；用 animation 简写配合变量，才真正可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把整套动画抽成
@keyframes，用变量控制关键帧节奏：@keyframes slide-fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } - 调用时只传变量：
animation: slide-fade var(--duration) var(--easing) forwards;
- 不要在简写中混用单位：比如
animation: slide-fade var(--duration) ease 0.1s—— 第三个参数是 delay，但0.1s是硬编码，破坏了变量一致性 - 注意
forwards等填充模式必须显式写出，它不参与变量替换
响应式动画时长用 media query 覆盖变量
移动端网络慢、性能弱，动画该更短更干脆；桌面端可稍长增强质感。靠 JS 切换 class 太重，纯 CSS 就够用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在媒体查询里重设变量：
@media (prefers-reduced-motion: reduce) { :root { --duration: 0.1s; } } - 优先用
prefers-reduced-motion，比屏幕尺寸更贴近用户真实需求 - 避免嵌套多层 media query 覆盖同一变量——CSS 变量不支持“条件赋值”，后声明的才会生效，顺序很重要
- 测试时手动触发
reduce模式：Chrome DevTools → Rendering → Emulate CSS reduced motion
变量本身不解决动画逻辑复杂性，但它把“改参数”这件事从文本搜索+逐行替换，变成一次赋值+全局生效。最容易被忽略的是：变量值一旦被计算（比如在 @keyframes 里用了 calc()），就无法再被 media query 动态覆盖——得靠 JS 补位，这时候就得掂量下，是不是真需要那么灵活。
