active:scale-95需配合transition-transform和duration-100写在默认状态，否则无动画效果；iOS需cursor-pointer、role="button"、tabindex="0"、touch-manipulation等才能触发:active。
因为本身不带动画，你漏写了和类——它们必须写在按钮的默认状态里，而不是里。
为什么
看起来像没反应
它其实有反应，只是“啪”一下缩、松手立刻弹回，人眼根本抓不住。原因不是 Tail
win
d 不支持，而是 CSS 的
伪类只控制“按下时的样式值”，不负责“怎么变过去”。过渡动画必须由常态元素自己声明。
告诉浏览器：“我只对 transform 变化做过渡”
设为 100ms 是经验阈值：短于 80ms 感觉不到，长于 150ms 显得卡顿
别用
—— 如果按钮同时有
，颜色变化也会被拖慢，点击反馈变钝
移动端点不动
的常见原因
iOS Safari 默认对非表单控件或无交互意图的容器禁用
，哪怕你用了
+
，也得手动激活。
确保按钮或其父容器有
（Tailwind 中可加
）
如果是
模拟按钮，必须加
，否则 iOS 根本不触发
加
（Tailwind 中为
），告诉浏览器“这是单点操作，别等 300ms 判断双击”
部分老版本 iOS 还需要全局设
，否则先闪蓝框再缩放
和
怎么选
不是越小越好，也不是越大越明显。缩放值直接影响可点击性、文字清晰度和视觉节奏。
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
立即学习
“
前端免费学习笔记（深入）
”；
（0.95 倍）是平衡点：GPU 渲染稳定、不触发重排、热区收缩可控、焦点框位置不变
变化太弱，尤其在小按钮或高 DPI 屏幕上，用户基本感知不到点击响应
或更低会让文字边缘模糊，iOS 上还可能被误判为长按，触发系统菜单
如果按钮内含图标+文字，优先测试
下图标是否仍清晰、文字是否未被裁切
多个状态共存时的冲突点
和
能共存，但容易出现“松手先回 hover 状态、再弹回原始大小”的跳变。
解决方法一：把
的 duration 设长一点（如
），
保持
，错开节奏
解决方法二：让
只动颜色（
），
专攻
，避开 transform 冲突
更关键的是：所有 transition 必须写在基础类中，例如
，不能只写在
后面
真正难的不是写出
，而是让这个缩放在真机上每次点都准时触发、不抖、不粘滞、不被系统高亮盖掉——这些细节藏在
、
、
和父容器的
里，而不是 class 列表里。
active:scale-95transition-transformduration-:activeactive:scale-95:activetransition-transformduration-100transition-allhover:bg-blue-600:active:activedivrole="button"cursor: pointercursor-pointerdivrole="button" tabindex="0":activetouch-action: manipulationtouch-manipulation-webkit-tap-highlight-color: transparentscale-95scale-98scale-95scale-98scale-90scale-95hover:scale-105active:scale-95hoverduration-200activeduration-100hoverhover:bg-blue-600activescaletransition-transform duration-100 ease-in:activeactive:scale-95cursorroletouch-actionpointer-events