在移动端场景中，transition 看起来像是“失效”了，很多情况下问题并不在 transition 本身，而是 :active 这个伪类在 iOS Safari 与安卓 WebView 中默认并不会稳定触发。想让点击过渡效果正常生效，通常需要配合设置 touch-action: manipulation、添加 tabindex="0"，或直接使用原生可交互元素。同时，transition 不能写在 :active 中，而应放在基础选择器里；此外还要确保前后样式值类型一致，并排查 Ja vaScript 干扰，这几个条件缺少任何一个，都可能导致移动端点击动画不生效。
如果移动端点击后 transition 没有执行，往往并不是 CSS 写法完全错误，而是浏览器压根没有完成状态切换——:active 这个伪类在 iOS Safari 和大多数安卓 WebView 中默认就未必会被激活；再叠加 Ja vaScript 报错、过渡声明写错位置、初始值未补全等常见问题，最终就会出现点击无动画、过渡不生效的情况。
为什么 :active 在真机测试时根本没有触发
iOS Safari 默认不会让纯 div、span 这类非交互元素响应 :active，即使你已经写好了 transition 也不会看到效果。通常只有在以下几种情况下，它才更可能正常生效：
- 元素本身就是
button，或是带有href的a - 元素添加了
tabindex="0"，并且能够获得焦点 - 元素绑定了
ontouchstart=""（空事件也可用于强制激活） - 元素设置了
touch-action: manipulation（更推荐的处理方式）
不要把希望寄托在 cursor: pointer 上，因为移动端浏览器基本不会依据这个声明来触发点击态。
transition 写进 :active 里，基本等于没有写
很常见的一种错误写法，是把 transition 直接放进 :active 规则中：
.btn:active {
transform: scale(0.95);
transition: transform 0.15s; /* ❌ 这里写没用 */
}浏览器只有在 :active 状态被触发时才会读取这条规则，而一旦手指离开，过渡上下文也会立即丢失，所以回弹效果通常会显得很突兀。正确做法是：
transition必须定义在基础选择器中（例如.btn { transition: transform 0.15s ease; }）:active只负责修改目标值（例如transform: scale(0.95)）- 确保这条
transition声明在 DevTools 的 Computed 面板中始终存在，而不是仅在 :active 状态下才出现
JS 干扰也会让 transition 在移动端彻底失效
Ja vaScript 一旦执行中断，整个点击交互链路就可能直接失效：
- 页面 JS 报错（例如
document.getElementById("xxx")获取不到元素），后续事件监听器无法注册，click或touchstart自然也不会正常绑定 - 先用
classList.remove()删除包含transition的类，再通过add()添加新类，可能造成过渡声明中断，浏览器无法顺利插值 - 直接写
el.style.transform = "scale(0.95)"，有时会覆盖原有 CSS 规则中的transition，导致动画效果丢失
更稳妥的做法，是把 transition 单独抽离成一个永远不移除的基础类（例如 .tappable { transition: transform 0.15s; }），而状态变化只去切换像 .tappable--pressed 这种纯数值状态类。
颜色或 transform 的值类型不一致，会直接导致跳变
transition 对起始值和结束值的类型非常敏感，只要类型不匹配，就很可能不会平滑过渡，而是直接跳变：
background-color: #007bff→background-color: rgb(0, 123, 255)✅（本质等价）background-color: #007bff→background-color: hsl(210, 100%, 50%)❌（Safari 旧版本中大概率直接跳变）transform: none→transform: scale(0.95)在部分安卓机型上可能不触发过渡；更稳妥的方式是显式写出transform: scale(1)作为起始值
如果真机测试时感觉点击反馈有延迟，那通常也不一定是 transition 的问题，而更可能是 300ms 点击延迟本身造成的。此时优先给容器添加 touch-action: manipulation，往往比继续调整 CSS 动画参数更有效。
真正让人卡住的，从来不是 transition 该怎么写，而是很多人没有意识到：它必须依赖一个稳定、持续且前后类型一致的渲染上下文，少了任何一个环节，移动端点击过渡效果都可能无法正常呈现。
