transition必须写在常态选择器中，否则移出时无过渡；应设transform: scale(1)、使用cubic-bezier缓动、避免transition: all；优先用transform: scale()而非width/height；控制放大倍数1.05–1.15；图片父容器加overflow: hidden；合并transform函数；按需设置transform-origin；图片模糊可加will-change: transform或image-rendering。
transition 必须写在常态选择器里，否则动画只进不出
鼠标移入时有放大效果、移出时却“啪”一下跳回原位——这是最常见的错误。根本原因是 transition 只写在了 :hover 里，而常态下没定义过渡行为。浏览器在移出时找不到起始过渡状态，只能硬切。
正确做法是把 transition 放在基础选择器中（比如 .card 或 .box），再在 :hover 中仅改变 transform 值：
.card {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
transform: scale(1.08);
}
- 必须显式写
transform: scale(1)，不能省略——否则首次 hover 可能从“无 transform”跳变 - 缓动函数推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease更轻快自然 - 别用
transition: all 0.25s，它会让边框、阴影甚至文字渲染都参与过渡，反而拖慢响应
用 transform: scale()，别碰 width/height/margin
缩放本质是视觉变换，不是布局重排。用 width 或 font-size 实现“放大”，会触发 layout（重排），卡顿明显，尤其在低端设备或复杂列表中。
transform: scale() 属于合成层属性，现代浏览器默认走 GPU 加速，只触发 paint 或 composite，性能稳得多。
- 放大倍数建议控制在
1.05–1.15之间；超过1.3容易导致图片边缘模糊或父容器溢出 - 若元素含图片，父容器务必加
overflow: hidden，防止缩放后撑破边界 - 如果同时用了
translateX或rotate，记得合并写法：transform: translateX(4px) scale(1.08)，否则后写的会覆盖前一个
transform-origin 决定缩放锚点，不设就默认居中
默认以元素中心为原点缩放，但很多场景需要“左上角原地放大”——比如文章列表项、图标网格、卡片堆叠。否则缩放会导致整体偏移，破坏 flex/grid 布局对齐。
加一句 transform-origin: top left 就能锁定左上角为缩放基点：
.icon {
transform-origin: top left;
transition: transform 0.3s ease;
}
.icon:hover {
transform: scale(1.2);
}
- 常见可选值：
top left、center（默认）、bottom right，支持像素或百分比（如20px 30px） - 慎用
transform-origin: 0 0，虽然等价于top left，但可读性差，团队协作时容易误读 - 如果元素本身有
position: absolute且设置了top/left，缩放锚点仍以自身盒模型为准，不受定位偏移影响
图片模糊？先看是否触发了低质量插值
悬停瞬间图片变糊，不是代码写错了，而是浏览器在非整数倍缩放时默认启用双线性插值（性能优先）。这不是 bug，是权衡。
有两个轻量级解法：
- 加
will-change: transform到:hover块里：.img:hover { will-change: transform; }—— 提前通知浏览器“这个要动”，它会切换到高质量渲染管线 - 更通用的做法是加
image-rendering: -webkit-optimize-contrast（Chrome/Safari）或image-rendering: crisp-edges（Firefox），但兼容性略弱 - 注意：
will-change别滥用，每个加它的元素都会额外占用内存和图层资源；只对高频交互、明确需要缩放的元素启用
真正难调的不是怎么写，而是缩放倍数、缓动曲线、锚点位置三者之间的微调——同一套代码在卡片、图标、头像上表现可能完全不同，得靠眼睛校准，而不是靠参数复制粘贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
