transition 不必作用于 width/height，推荐用 transform: scale() 实现平滑缩放；需设初始值、transform-origin 和 will-change 以避免布局偏移与卡顿，并针对 hover/active 及多端兼容做适配。
transition 要作用在 width/height 上才有效果？
不是。直接对 width 或 height 做 transition 往往效果生硬，且容易触发重排（layout），性能差。更推荐用 transform: scale() —— 它只触发重绘，不触发布局计算，动画更顺滑。
关键点：transform 是可过渡的 CSS 属性，但必须显式声明过渡目标，比如：
button {
transform: scale(1);
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.15);
}
常见错误：漏写 transform 的初始值（如 transform: scale(1)），导致首次 hover 没有过渡效果 —— 浏览器需要明确“从哪变到哪”。
scale 缩放会挤压相邻元素？怎么避免布局偏移
transform: scale() 默认以元素左上角为原点缩放，且不脱离文档流，但视觉上会“覆盖”或“推开”周围内容。真正影响布局的是元素自身的盒模型尺寸没变，只是视觉放大了。
立即学习“前端免费学习笔记（深入）”；
- 解决办法一：加
transform-origin: center让缩放居中，减少方向性挤压 - 解决办法二：对父容器设
overflow: hidden，裁掉溢出部分 - 解决办法三（推荐）：用
will-change: transform提前提示浏览器优化渲染路径，尤其在频繁交互时
示例：
card {
transform: scale(1);
transform-origin: center;
will-change: transform;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
card:hover {
transform: scale(1.08);
}
鼠标移入/移出太快导致缩放卡顿或跳变？
这是 transition 时间与鼠标事件节奏不匹配的典型表现。常见于快速来回悬停，CSS 过渡队列未清空，造成“缩放未完成就反向执行”，视觉上像抽搐。
- 缩短
transition-duration（如从0.3s改为0.18s）能缓解，但治标不治本 - 更可靠的方式是统一使用
transform+transition-timing-function，选缓入缓出曲线（如cubic-bezier(0.25, 0.46, 0.45, 0.94)），比默认ease更自然 - 避免在
:hover外额外写:active或:focus的 scale 冲突，除非你明确控制各状态优先级
移动端 touch 交互下 scale 不生效？
移动端 Safari 和部分安卓浏览器对 :hover 支持不稳定，尤其在无 hover 能力的设备上，:hover 可能仅在点击后短暂触发一次，甚至完全忽略。
实操建议：
- 用
@media (hover: hover)区分支持 hover 的设备，对不支持的设备改用:active或 JS 监听touchstart/touchend - 若必须纯 CSS，可同时写
button:hover, button:active，但注意:active在 touch 设备上持续时间极短，需配合transition-delay微调 - 慎用
transform: scale()配合pointer-events: none—— 这会让后续点击失效
兼容写法示例：
@media (hover: hover) {
.icon:hover {
transform: scale(1.2);
}
}
.icon:active {
transform: scale(0.95);
}
缩放看似简单，但实际要兼顾性能、交互节奏、多端行为差异。最易被忽略的是：不设 transform-origin 导致缩放偏移，以及在 touch 设备上盲目依赖 :hover。 
