:active 中 transition 不生效需检查三处：必须写在默认状态而非 :active 里；需明确指定过渡属性而非用 all；确保元素可交互且移动端加 touch-action: manipulation。
:active 里 transition 不生效？检查这三处
浏览器对 :active 的触发非常短暂（通常 20–50ms），如果 transition 没写在默认状态、或属性没被显式声明，就会“点下去没反应”。常见现象是：点击时颜色/缩放毫无变化，松手才动一下。
-
transition必须写在元素的**默认状态**（比如.btn），不能只写在:active里 - 必须明确指定要过渡的属性，例如
transition: background-color 0.15s, transform 0.1s；避免用transition: all .2s，部分浏览器会忽略或误触发 - 确保元素可交互：
<button></button>最稳；<div role="button"> 也行；纯 <code><div> 在 Safari 或 Firefox 中大概率不响应 <code>:active移动端点击无反馈？加 touch-action: manipulation
iOS Safari 和部分安卓 WebView 默认禁用
:active的即时响应，尤其在快速点击时。不加处理，用户会觉得按钮“点不动”。- 给按钮加
touch-action: manipulation，能绕过 300ms 延迟并激活:active - 同时建议把
transition-timing-function改成cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-out），让缩放/位移回弹更自然，弥补移动端触感缺失 - 如果按钮嵌套在
overflow: hidden容器里，transform: scale()可能被裁剪——临时设为overflow: visible排查
想点下就变、松手再缓动？别全靠 :active
纯 CSS 无法让“按下瞬间突变 + 松手平滑恢复”共存于同一组
transition。因为:active → default和default → :active共享同一套过渡定义。- 方案一：用
text-shadow替代color过渡 ——:active直接改color（无过渡），默认状态用transition: text-shadow 0.25s控制松手时的渐变 - 方案二：JS 配合 class 切换，比如点击时加
.pressed，松开后自动移除；这样两段过渡可完全独立控制 - 注意：不要在
:active里设opacity: 0.8，又在 JS 里加.pressed设同样值 —— 浏览器会因属性冲突跳变，失去平滑感
为什么 transform + transition 组合最稳？
因为
transform和opacity是仅有的两个能触发 GPU 合成层、避开重排（reflow）的 CSS 属性。其他如width、top、left会强制浏览器重新计算布局，导致卡顿甚至丢帧。立即学习“前端免费学习笔记（深入）”；
- 缩放用
transform: scale(0.96)，别用width/height缩放 - 位移用
transform: translateY(-2px)，别用top: -2px - 初始状态记得写
transform: scale(1)或transform: none，否则某些浏览器会把未声明的 transform 当作none导致叠加异常
- 给按钮加
