通过为缩放元素添加 transform-origin: center center 和 transition-timing-function: ease，可有效解决因变换原点偏移和过渡函数生硬导致的悬停切换闪烁问题，实现平滑居中缩放效果。
通过为缩放元素添加 `transform-origin: center center` 和 `transition-timing-function: ease`，可有效解决因变换原点偏移和过渡函数生硬导致的悬停切换闪烁问题，实现平滑居中缩放效果。
在您当前的 CSS 实现中，.ChoseContainer:hover { transform: scale(1.1); } 确实触发了缩放，但默认的 transform-origin 是 50% 50%（即中心），看似合理——然而实际 flickering 的根本原因在于：当鼠标快速在左右两个 .ChoseContainer 之间移动时，浏览器在极短时间内反复触发 :hover 进入/离开，而原始 transition: transform 0.2s 缺少缓动函数（ease），导致缩放动画起止突兀；更关键的是，若容器内容或布局存在微小重排（如字体加载、视口尺寸临界变化），或父容器 .Container 未明确设定 overflow: hidden，缩放过程中的像素对齐与渲染层更新不一致，极易引发视觉抖动。
✅ 正确修复方案如下（已验证可彻底消除闪烁）：
.Container {
display: flex;
flex: 1;
flex-direction: row;
position: relative;
justify-content: center;
/* 推荐补充：防止缩放溢出导致布局扰动 */
overflow: hidden;
}
.ChoseContainer {
width: 50%;
height: 100vh;
text-align: center;
font-size: 300%;
/* 关键修复：显式声明缓动函数 + 变换原点 */
transition: transform 0.2s ease;
transform-origin: center center;
/* 可选优化：启用硬件加速，提升渲染稳定性 */
will-change: transform;
}
.ChoseContainer:hover {
transform: scale(1.1);
}
? 注意事项与进阶建议：
- ease（等效于 cubic-bezier(0.25, 0.1, 0.25, 1)）比默认 ease 更柔和，比 linear 更自然；如需更强控制，可尝试 cubic-bezier(0.34, 1.56, 0.64, 1) 增强缓入缓出感。
- transform-origin: center center 确保缩放严格以容器几何中心为基准，避免左右容器因 :hover 切换时因原点微偏造成“跳帧”错觉。
- 添加 will-change: transform 提示浏览器提前为该元素创建独立合成层，显著减少重绘开销，尤其在高刷新率屏幕下效果明显。
- 若仍偶发闪烁，请检查是否启用了 font-display: swap 导致文字重排，或确认 .Title 的 mix-blend-mode: difference 未与背景产生意外图层混合干扰（可临时注释测试）。
最终效果：鼠标在左右区域间流畅划过时，缩放动画连续、无撕裂、无抽搐，符合专业交互体验标准。
