通过为元素添加 transform-origin: center center 并将过渡缓动函数设为 ease，可有效消除因缩放中心偏移导致的悬停切换闪烁，实现平滑、自然的缩放动画。
通过为元素添加 transform-origin: center center 并将过渡缓动函数设为 ease，可有效消除因缩放中心偏移导致的悬停切换闪烁，实现平滑、自然的缩放动画。
在使用 transform: scale() 实现悬停缩放效果时，若未显式指定缩放原点（transform-origin），浏览器默认以元素左上角（0 0）为缩放中心。当鼠标快速在左右两个相邻 .ChoseContainer 之间来回移动时，由于每个容器的缩放中心不一致（尤其在边界区域），会导致视觉上的“跳变”或“闪烁”——这正是你 GIF 中呈现的不流畅现象。
解决方法非常简洁但关键：统一缩放中心 + 合理缓动函数。以下是优化后的完整 CSS：
.Container {
display: flex;
flex: 1;
flex-direction: row;
position: relative;
justify-content: center;
}
.ChoseContainer {
width: 50%;
height: 100vh;
text-align: center;
font-size: 300%;
/* 关键修复：指定缩放中心为元素正中心 */
transform-origin: center center;
/* 关键修复：使用 ease 缓动，比默认 linear 更自然 */
transition: transform 0.2s ease;
}
.ChoseContainer:hover {
transform: scale(1.1);
}
.Text {
margin-top: 70vh;
}
.Title {
position: absolute;
background-color: transparent;
font-size: 600%;
margin-top: 15vh;
mix-blend-mode: difference;
color: aliceblue;
z-index: 99;
}✅ 为什么这样能解决问题？
- transform-origin: center center 确保无论鼠标从哪个方向进入，缩放都围绕元素几何中心均匀展开/收拢，避免边缘拉伸抖动；
- transition: ... ease 替代默认的 ease（实际多数浏览器默认即为 ease，但显式声明更可靠），提供更符合人眼感知的加减速动画，显著提升流畅感；
- 移除冗余样式（如重复的 position: relative 或未使用的 z-index 冲突）也能减少渲染不确定性。
? 进阶建议：
立即学习“前端免费学习笔记（深入）”；
- 若需更高性能，可添加 will-change: transform（仅在必要时，避免滥用）；
- 对于多容器交界处的 hover 区域重叠问题，可考虑用 pointer-events: none 配合伪元素扩大热区，进一步提升交互容错性；
- 测试时建议在不同分辨率与滚动状态下验证，确保 100vh 高度不会因地址栏显示而意外收缩。
最终效果：鼠标在左右容器间平滑穿梭时，缩放动画连贯稳定，无跳帧、无抽搐，真正达成专业级交互动效。
