CSS变量不能自动响应:hover/:active状态，必须分别为二者显式声明transition；:hover适合0.25s悬停反馈，:active需0.12s即时压感，且transition属性、时长、缓动函数须严格对齐。
CSS变量本身不能“响应”hover或active状态切换——你得为每种状态显式写transition规则，变量只是占位符，不自动生效。
为什么:hover和:active必须分开声明transition
浏览器对:hover和:active的解析是独立的伪类，它们触发时不会共享同一套transition声明。哪怕你把--transition-fast同时用在两者里，也得各自写一遍transition，否则:active根本不会动。
- :hover是悬停态，持续存在，适合做轻量反馈（如背景色微调、图标缩放）
- :active是瞬时态，仅在按下未松开时生效，适合做“按下去”的压感（如位移-2px、阴影加深）
- 如果只在默认状态写了
transition: background-color var(--transition-fast) ease，那么:hover会动，:active却不会——因为:active没声明transition，浏览器不会继承
怎么给hover和active配不同档位的时长变量
高频微交互需要更快反馈，:active比:hover更强调“即时性”，所以通常用更短的时长。别硬套同一个变量。
- 按钮类组件推荐：
--transition-hover: 0.25s（悬停渐变留出呼吸感），--transition-active: 0.12s（按下几乎无延迟） - 不要用
calc(var(--transition-hover) * 0.5)——CSS变量不支持运行时计算，该写死就写死 - 确保两个伪类都完整声明transition，且属性、时长、缓动函数严格对齐：比如
transition: transform var(--transition-active) ease, box-shadow var(--transition-active) ease - 移动端要注意：iOS Safari某些版本默认禁用:active，需加
* { -webkit-tap-highlight-color: transparent; }并确保元素有cursor: pointer或touch-action: manipulation
常见错误：把变量当“开关”用
有人以为改了--transition-active值，所有:active就会自动更新——错。变量只是字符串占位符，真正起作用的是它被写进哪条transition声明里。
立即学习“前端免费学习笔记（深入）”；
- 改了
:root里的--transition-active: 0.1s，但组件里还是transition: background-color 0.15s ease，那变量根本没被引用，改了也白改 - 写了
.btn:active { transition: background-color var(--transition-active); }，却漏了transition-timing-function，结果浏览器用默认ease，但你本意可能是cubic-bezier(0.2, 0.8, 0.4, 1) - 用
transition: all var(--transition-active) ease——会意外触发border-color、outline等无关属性过渡，引发重绘，且无法控制哪些属性该动
实际写法示例（按钮组件）
:root {
--transition-hover: 0.25s;
--transition-active: 0.12s;
--easing-interactive: cubic-bezier(0.2, 0.8, 0.4, 1);
}
<p>.btn {
background-color: #007bff;
transition: background-color var(--transition-hover) var(--easing-interactive),
transform var(--transition-hover) var(--easing-interactive);
}</p><p>.btn:hover {
background-color: #0056b3;
transform: translateY(-1px);
}</p><p>.btn:active {
background-color: #004080;
transform: translateY(0);
transition: background-color var(--transition-active) var(--easing-interactive),
transform var(--transition-active) var(--easing-interactive);
}注意.btn:active里transition必须重写，不能省略；transform从translateY(-1px)回退到0，配合更短时长，才能形成“按下即落”的干脆感。这点容易被忽略：很多人只改颜色，忘了位移也要同步归零并配对时长。
