按钮 hover 缩放卡顿或无动画，需同时设置 transform: scale() 和 transition: transform；transition 必须写在默认状态，避免用 all；优先用 transform 而非 width/height 以提升性能。
按钮 hover 缩放卡顿或没动画？检查是否用了
+
直接改
/
或
但没配
，缩放会瞬间跳变。必须同时设置两个属性：用
控制缩放，再用
声明对
的过渡行为。
必须写在默认状态（非
）里，否则首次 hover 不触发动画
只写
容易引发意外
重绘
，建议精确到
缩放值推荐用
这类小幅度值，避免视觉突兀
为什么用
而不是
/
？
改
/
会触发
浏览器
Layout（布局重排），性能差；
属于合成层操作，由 GPU 加速，帧率更稳。尤其在低配设备或密集交互场景下，差异明显。
缩放、位移、旋转都该优先走
别在
中混用
和
等不同性质属性，除非明确需要
如果按钮含文字，
会等比缩放内容，注意字体可读性
太生硬？换更自然的缓动函数
默认
或
对缩放来说启动和结束仍偏快。用
微调更可控：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这组贝塞尔值（
）是较常用的“缓入缓出”变体，比原生
更柔和
想更轻快可用
（轻微过冲感）
避免用
，匀速缩放缺乏真实感
移动端点击无反馈？补上
和主动态
iOS Safari 和部分
安卓
浏览器在
上行为不一致，纯
缩放在触摸设备可能失效。需加一层主动触发逻辑：
立即学习
“
前端免费学习笔记（深入）
”；
给按钮加
，提升触摸响应优先级
用
补缩放，确保点按有即时反馈：
若用 JS 绑定点击，记得在
后手动还原
，否则可能卡在缩放态
缩放动画真正难的不是写几行 CSS，而是判断什么时候该用
、什么时候该用
（避免模糊）、以及在 flex/grid 布局中缩放是否影响父容器尺寸——这些细节不测真机容易漏。
transformtransitionwidthheightscale()transitiontransform: scale()transitiontransformtransition:hovertransition: all 0.2stransformscale(1.05)transformwidthheightwidthheighttransformtransformtransitiontransformopacityscale()ease-in-outeaseease-in-outcubic-bezier()button {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: scale(1.08);
}0.25, 0.46, 0.45, 0.94ease-in-outcubic-bezier(0.34, 1.56, 0.64, 1)lineartouch-action:hover:hovertouch-action: manipulation:activebutton:active { transform: scale(0.95); }clicktransformscale()scale3d()