图片局部放大transition不生效，主因是transform-origin未对齐缩放中心或scale被其他transform覆盖；需显式设置transform-origin并避免多transform值冲突。
图片局部放大时transition不生效？检查transform-origin和scale的组合写法
直接给 img 或其父容器加 transition: transform 0.3s ease，但 hover 后缩放没动画——大概率是 transform-origin 没对齐放大中心，或 scale() 被其他 transform 覆盖了。
局部放大本质是「以某点为原点缩放」，必须显式设置 transform-origin，且它要和缩放前的布局位置一致。比如想让鼠标悬停处为中心放大，就得用 JS 动态算坐标，纯 CSS 只能固定原点（如 50% 50%）。
-
transform-origin必须写在触发 transition 的元素上，且不能被父级transform干扰（比如父容器有rotate就会重置子元素坐标系） - 避免同时写多个
transform值：用transform: scale(1.5) translateZ(0)比分开写scale和translate更稳妥，防止浏览器合并时丢掉过渡 - 别用
width/height配合transition模拟缩放——会触发重排，卡顿明显，且无法实现“以某点为中心”的效果
用CSS animation实现回弹效果，为什么比transition更可控？
transition 只能定义进入/离开两个状态，而局部放大后需要「先放大 → 暂停 → 回弹」三段节奏，@keyframes 才能精确控制中间停顿和回弹曲线。
典型回弹动画不是简单 scale(1)，而是带 overshoot 的贝塞尔曲线，比如 cubic-bezier(0.2, 0.8, 0.4, 1.2)，让放大后略超 1 倍再弹回，才有“弹性”感。
立即学习“前端免费学习笔记（深入）”；
- 回弹阶段必须从放大后的状态开始：动画的
from要设为scale(1.8)，不能从scale(1)开始，否则会闪一下 - 用
animation-fill-mode: forwards保持最终缩放态，否则动画一结束就跳回原始尺寸 - 慎用
animation-direction: alternate：它会让回弹变成反向播放整个动画，容易导致缩放中心偏移
@keyframes zoomBounce {
0% { transform: scale(1); }
70% { transform: scale(1.8); }
100% { transform: scale(1); }
}JS动态计算放大中心点时，offsetLeft/offsetTop为什么不准？
用 event.offsetX 和 event.offsetY 直接算坐标最稳；若用 offsetLeft + getBoundingClientRect()，容易因边框、padding、滚动条偏移出错。
关键点在于：CSS 的 transform-origin 是相对于元素自身盒模型（content box），而 JS 获取的坐标默认是相对于 padding box，差一个 clientLeft/clientTop。
- 优先用
event.clientX - element.getBoundingClientRect().left，再减去element.clientLeft和element.clientTop - 如果图片设置了
object-fit: cover，实际渲染区域和原始尺寸不一致，必须用element.naturalWidth/Height和element.clientWidth/Height算缩放比例，再反推坐标 - 移动端要注意
touchstart的touches[0]坐标，别直接用clientX，否则在缩放页面里会偏差
transition与animation混用时，哪些属性会互相覆盖？
CSS 动画和过渡共存时，animation 会完全接管 transform 属性，导致 transition 失效——这不是 bug，是规范行为。
想让 hover 触发放大、点击触发回弹，得把两者拆到不同状态：比如用 :hover 控制 transition 进入，用 JS 切换 class 触发 animation 回弹，且动画 class 里不要写 transition。
- 避免同时给同一元素设置
transition: transform和animation: zoomBounce——后者优先级更高，前者被忽略 - 如果要用 transition 做回弹，必须等 animation 结束后再移除动画 class，否则移除瞬间会触发 transition 的“离开”动画，造成双动画打架
- 用
animation-play-state: paused暂停动画做中间态控制很危险：某些浏览器暂停后transform值会丢失，导致回弹起点错乱
回弹的“弹”感强弱，取决于贝塞尔曲线的第三、四参数是否超过 1，这点很容易被当成魔法数字随便改——但超出太多（比如 cubic-bezier(0.1, 1.5, 0.9, 0.5)）会导致动画在中间帧剧烈抖动，尤其在低端设备上。
