必须将 transition 写在默认状态而非 :hover 中，否则首次悬停会跳变；配合 transform-origin 控制缩放中心，移动端加 touch-action: manipulation 防双击缩放，还需兼顾 :focus 可访问性。
直接用 transition 配合 transform: scale() 就能做出平滑缩放动画，但必须把 transition 写在默认状态（非 :hover），否则第一次悬停会“跳变”——这是最常踩的坑。
transition 必须写在默认状态，不能只写在 :hover 里
浏览器只对“有过渡声明的状态变化”做动画。如果只在 .btn:hover { transition: transform 0.3s; } 里写 transition，那么从默认态到 hover 态的变化没有过渡定义，就会瞬间生效。
-
.btn { transition: transform 0.3s ease; }✅ 正确：默认就声明了过渡 -
.btn:hover { transition: transform 0.3s ease; }❌ 错误：首次 hover 没动画，移出时才有 - 过渡属性建议只写
transform，避免用all—— 否则改个color或opacity也会意外触发缩放动画
scale 缩放中心点由 transform-origin 控制
默认以元素中心缩放，但按钮图标、卡片入口等场景常需要从左上角、顶部中心展开。这个锚点不参与动画过渡，但会影响视觉结果。
-
transform-origin: center;（默认）适合居中放大，比如图片悬停 -
transform-origin: top left;适合下拉菜单触发图标、左对齐按钮的弹出效果 -
transform-origin: 20px 30px;支持像素定位，但要注意父容器overflow: hidden时可能裁切 -
transform-origin不需要加进transition，它和transform一起变化时浏览器会自动插值
移动端需防双击缩放干扰
在 iOS Safari 等浏览器中，连续点击可能触发页面双击缩放，导致 scale 动画被中断或错位。
立即学习“前端免费学习笔记（深入）”；
- 给可交互元素加
touch-action: manipulation;，明确告诉浏览器“这是手势操作，别管双击缩放” - 避免对
<img>直接加缩放，推荐套一层<div class="image-container">并设overflow: hidden - 非整数
scale（如1.15）可能在某些设备上渲染模糊，加will-change: transform;或transform: translateZ(0);可强制 GPU 加速提升清晰度
真正容易被忽略的是可访问性：纯 :hover 缩放对键盘 Tab 用户和屏幕阅读器不可见。如果元素有交互意义（比如按钮、链接），记得补上 :focus 和 :focus-visible 对应规则，否则焦点框可能被缩放后错位或遮挡。
