scale动画需配合transition才能产生缓动效果，transition必须写在默认状态且仅过渡transform更安全；transform-origin影响缩放锚点但无需加入transition；需兼顾:hover/:focus/:focus-visible以保障可访问性；非整数scale可能导致模糊，可加will-change或translatez(0)优化；移动端应设touch-action: manipulation避免与双击缩放冲突。
scale动画必须配transition才能动
直接写 transform: scale(1.5) 只会瞬间变形，没有动画。CSS动画靠的是属性值变化 + 过渡机制，transform 本身不触发重排，但要让它“动起来”，得明确告诉浏览器：这个变化需要缓动。
常见错误是只加了 transform 却漏掉 transition，或者把 transition 写在 hover 状态里（导致首次悬停无动画）。
-
transition必须写在默认状态（非:hover / :active）上，例如.btn { transition: transform 0.2s ease; } - 只过渡
transform比过渡all更安全，避免意外触发动画（比如同时动了color或opacity） - 时间单位用
s（如0.25s）比ms更易读，且兼容性无差别
scale的基准点默认是中心，想改就得用transform-origin
元素放大时默认绕自身中心缩放，但按钮图标可能需要从左上角展开，卡片悬停可能想从顶部向下铺开——这时候不调 transform-origin，动画会偏移出预期位置。
注意：transform-origin 的值影响视觉锚点，但它本身不是动画属性，不需要加进 transition；只要它和 transform 一起变化，浏览器就会平滑过渡原点+缩放两个变换。
- 常用值：
top left、center（默认）、bottom right，也支持像素或百分比，如20px 30px - 如果元素有
border-radius，缩放时圆角会同步缩放，无需额外处理 - 慎用
transform-origin: 0 0配合大 scale 值，可能让元素直接移出视口（尤其父容器overflow: hidden时）
hover触发缩放时，focus和键盘用户容易被忽略
纯 :hover 写法对鼠标用户友好，但键盘 Tab 进入、屏幕阅读器用户完全感知不到变化，甚至可能因缩放导致焦点框错位或内容被裁切。
这不是“加个:focus就行”的问题，而是交互反馈需一致。缩放本质是状态可视化，状态不止有 hover。
- 同时写
:hover, :focus, :focus-visible，确保三类用户都能看到响应 - 避免在
:focus里用过大 scale（如scale(1.8)），可能撑破容器或遮挡相邻元素 - 如果缩放后文字变模糊，大概率是用了非整数倍缩放（如
scale(1.3)）+ 元素没开启硬件加速，可加will-change: transform或transform: translateZ(0)强制 GPU 渲染
移动端双击缩放和scale动画会打架
iOS Safari 默认双击放大页面，如果元素本身又带 scale 动画，用户双击后可能看到异常拉伸或卡顿。这不是 bug，是 viewport 缩放层和 CSS 变换层叠加的结果。
根本解法不是禁用双击缩放（损害可访问性），而是让动画和缩放互不干扰。
- 给缩放元素加
touch-action: manipulation，能减少误触，同时不影响双击缩放全局行为 - 避免在
body或全屏容器上设transform: scale()，优先作用于具体组件级元素 - 真要兼容老 iOS（maxTouchPoints 后降级为 opacity + translateY 模拟缩放感，避开 transform 层冲突
margin 或 position: absolute 补救，反而更容易引发新问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
