:active状态不触发过渡动画，因其是瞬时伪类、不维持且无明确起始值；在:active中写transition无效，因浏览器无法从auto/unset等未声明状态插值，需用JavaScript配合自定义类实现。
:active 状态本身不触发过渡动画，是因为它不是“状态切换的起点”，而是浏览器在点击瞬间临时应用的伪类——过渡需要明确的起始值和持续存在的 transition 声明，而 :active 既不维持、也不携带过渡逻辑。
为什么 :active 里写 transition 没用
你可能会这样写：
.btn:active {
transform: scale(0.96);
transition: transform 0.08s;
}
但这是错的。原因有二：
-
:active是瞬时态：iOS Safari 下通常只维持 transition 来不及启动就结束了 -
transition必须存在于“常态”中：浏览器只在元素持续拥有该声明时，才对后续属性变化做插值。一旦:active离开，声明消失，哪怕你刚切过去，也无上下文可依
过渡失效的典型错误组合
以下写法看似合理，实则全部无效：
立即学习“前端免费学习笔记（深入）”；
-
.btn:hover:active { ... }：组合选择器优先级高，但语义混乱；:hover和:active很难同时满足，尤其在移动端 -
.btn { transition: background-color 0.2s; } .btn:active { background-color: #ccc; }：起始值没显式定义（比如未设background-color: #fff），浏览器从initial或继承值推断，导致插值失败 -
.btn:active { border: 2px solid red; transition: border 0.3s; }：若常态下border是none或未声明，起始颜色/宽度不可动画，整条transition静默降级
真正能跑通的过渡方案
把过渡逻辑从伪类里“解放出来”，绑定到基础元素上：
- 基础类始终带
transition：.btn { transition: transform 0.06s, opacity 0.08s; } - 起始值必须显式写死：
.btn { transform: scale(1); opacity: 1; }（不能依赖默认） - 用 JS 控制状态类：
el.addEventListener('touchstart', () => el.classList.add('is-pressed'))，再配.btn.is-pressed { transform: scale(0.96); } - 加
touch-action: manipulation到目标元素，避免 iOS 等待双击延迟，让touchstart立刻触发
最易被忽略的一点：即使你写了 transition，只要初始 transform 或 opacity 是从 auto、unset 或未声明状态开始，动画就注定跳变——浏览器没有起点，就无法插值。
