直接写 transition-duration: 0.3s 无效，因必须与 transition-property 或完整 transition 简写共用；硬编码导致维护混乱，应使用语义化 CSS 变量（如 --transition-fast）并按场景选用。
为什么直接写 transition-duration: 0.3s 不行
硬编码时长会让整个项目变成“时间补丁集”：按钮改了，下拉菜单忘了，模态框又用另一个值。更麻烦的是，transition-duration 单独声明无效，它必须和 transition-property 或完整 transition 简写一起出现，否则浏览器直接忽略整条规则。
常见翻车现场：
-
transition-duration: 0.3s;单独写在样式里 → 动画完全不触发 -
transition: all 0.3s;→ 所有可动画属性都动，包括你没想动的box-shadow或border-color，引发意外重排 - 媒体查询里改了
transition-duration，但没同步更新transition-property→ 新旧声明冲突，结果以最后解析的为准，行为不可控
用 :root 变量定义标准档位，不是只定义一个 --duration
单一变量（比如只设 --duration: 0.3s）看似统一，实则无法适配不同交互节奏。按钮悬停要快，页面切换要稳，加载指示器可以稍慢——它们该用不同档位，而不是靠乘法临时算（@duration-base * 1.2 在 CSS 变量里没法直接运算）。
正确做法是预设几档语义化变量：
立即学习“前端免费学习笔记（深入）”；
:root {
--transition-fast: 0.18s;
--transition-normal: 0.3s;
--transition-slow: 0.45s;
}然后按场景选用，比如：
- 按钮、图标 hover：
transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease; - 导航展开/收起：
transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease; - 模态框入场：
transition: opacity var(--transition-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94), transform var(--transition-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
多个属性不同时间，逗号分隔必须严格对齐
当你需要 opacity 动得快、transform 动得慢，可以用逗号分隔写法，但顺序错一位就全乱：
.nav-item {
transition-property: opacity, transform;
transition-duration: 0.2s, 0.4s; /* ✅ 对应上一行 */
transition-timing-function: ease, cubic-bezier(0.25, 0.46, 0.45, 0.94);
}容易踩的坑：
- 只写
transition: opacity 0.2s, transform 0.4s;→ 浏览器会把第二个当作独立的transition声明，覆盖第一个，最终只有transform有效 -
transition-property和transition-duration的项数不一致 → 多余的 duration 被丢弃，少的则循环复用，结果难以预测 - 混用简写和拆分写法（比如先写
transition: opacity 0.2s;，再写transition-duration: 0.4s;）→ 后者无效，因为transition简写会重置所有子属性
伪类中动态改时长，只影响「进入」方向
很多人以为给 :hover 加个 transition-duration: 0.5s; 就能让进出都变慢，其实不是：
- 鼠标移入时，用的是
:hover里声明的transition-duration - 鼠标移出时，回退动画仍走默认状态下的时长（比如
.btn { transition-duration: 0.2s; }）
要让进出一致，得两边都写：
.btn {
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: #007bff;
transition-duration: 0.5s;
}
/* 但移出还是 0.2s —— 想进出都 0.5s，就得显式覆盖 */
.btn {
transition: background-color 0.5s ease;
}
.btn:hover {
background-color: #007bff;
}真正复杂的地方在于：这些变量和声明一旦分散在多个文件、多个组件作用域里，很容易被局部 !important 或层叠顺序覆盖掉。最稳妥的方式，是把所有过渡相关变量和基础 mixin 集中在设计系统入口文件里，禁止业务组件直接写裸 transition。
