必须用 transition 连接状态与缩放动画，仅 @keyframes 无法自动触发；需显式设默认 transform: scale(1)，单独过渡 transform，慎用 will-change 和 translateZ(0)。
用 transform: scale() 做状态切换动画必须加 transition
只靠 @keyframes 定义缩放动作，不配合 transition，元素在状态切换（比如 hover、class 切换）时不会自动播放动画——它只会突变。关键不是“能不能写 keyframes”，而是“谁来触发它”。transition 才是连接状态与动画的桥梁。
-
transform属性本身支持硬件加速，比直接改width/height更流畅 - 必须对
transform单独设transition，例如：transition: transform 0.2s ease; - 不要写成
transition: all 0.2s;，这会把所有变化都拖进过渡，可能意外触发重排或干扰其他属性 - 如果用了
will-change: transform;，需谨慎：仅在真正需要提升性能且已确认帧率瓶颈时添加，否则可能增加内存开销
hover 状态下缩放，别漏掉初始 transform: scale(1)
CSS 中未显式声明的 transform 值默认为 none，而 none 和 scale(1.2) 不是可插值的值对，会导致动画卡顿甚至失效。必须给默认状态一个明确的 scale() 值。
.btn {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn:hover {
transform: scale(1.15);
}
- 使用
cubic-bezier()调整缓动比ease更可控，上面这段接近“先慢后快再慢”的自然感 - 避免在
:hover里写transform: scale(1.15) translateZ(0);这类叠加写法——translateZ(0)已被现代浏览器优化，手动加反而可能干扰合成层判断 - 移动端注意：
:hover在触摸设备上不可靠，如需兼容，应配合focus或 JS 添加.is-active类
用 @keyframes 实现复杂缩放节奏，得靠 animation + 触发类
当缩放需要多段节奏（比如先放大再微调、或带弹性效果），transition 就不够用了，必须用 animation 配合 class 切换。但要注意：动画默认不重播，重复触发需加 animation-fill-mode: forwards 和手动重置。
.pulse {
animation: pulse-scale 0.4s ease-out;
animation-fill-mode: forwards;
}
@keyframes pulse-scale {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
- JS 触发时，不能直接连续加同一 class，要先
remove再add，或用offsetHeight强制重排来重启动画 - 若缩放伴随颜色/透明度变化，建议把
transform和opacity分开写transition，避免因渲染管线冲突导致掉帧 - IE11 及更早版本不支持
transform的独立过渡，需降级为zoom（仅 IE）或放弃动画
缩放动画卡顿？先查是否触发了 layout 或 paint
即使写了 transform，如果元素有 box-shadow、border-radius 配合较大缩放，或父容器有 overflow: hidden，仍可能引发频繁重绘。Chrome DevTools 的 Rendering 面板可勾选 “Paint flashing” 直观查看。
立即学习“前端免费学习笔记（深入）”；
- 大尺寸图片缩放时，加上
image-rendering: -webkit-optimize-contrast;（Safari）或image-rendering: crisp-edges;（Firefox）能减少模糊，但不要滥用 - 避免在缩放动画中动态修改
font-size或padding，这些会触发 layout，打断 GPU 加速 - 真遇到卡顿又无法精简样式时，可临时加
transform: translateZ(0);强制提升为合成层——但这是兜底手段，不是设计首选
transform + transition 这对组合稳稳跑起来。 
