通过为缩放元素添加 transform-origin: center center 和 transition-timing-function: ease，可有效解决因变换原点偏移或过渡生硬导致的鼠标快速切换时的视觉闪烁问题。
通过为缩放元素添加 transform-origin: center center 和 transition-timing-function: ease，可有效解决因变换原点偏移或过渡生硬导致的鼠标快速切换时的视觉闪烁问题。
在实现左右并列容器的悬停缩放效果时，常见的“flickering”（闪烁）现象往往并非由性能瓶颈引起，而是源于 CSS 变换的默认行为：transform: scale() 默认以元素左上角为变换原点（transform-origin: 0 0），当鼠标从一个容器快速移入相邻容器时，由于两个 .ChoseContainer 共享父容器 .Container 的 flex 布局边界，缩放瞬间会轻微挤压/位移布局空间，触发重绘抖动，尤其在高刷新率屏幕或快速扫掠操作下尤为明显。
解决的关键在于两点：
- 显式指定变换原点：添加 transform-origin: center center，确保缩放始终围绕容器中心进行，避免边缘拉伸引发的视觉跳变；
- 优化过渡缓动函数：将 transition: transform 0.2s 升级为 transition: transform 0.2s ease（或更平滑的 ease-out / cubic-bezier(0.25, 0.46, 0.45, 0.94)），使缩放启停更自然，减少突兀感。
以下是修正后的完整 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%;
transition: transform 0.2s ease; /* ✅ 添加 ease 缓动 */
transform-origin: center center; /* ✅ 显式居中变换原点 */
}
.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;
}
.ChoseContainer:hover {
transform: scale(1.1); /* 缩放值可根据设计微调，如 1.08～1.15 */
}
⚠️ 注意事项：
- 避免在 .ChoseContainer 上设置 overflow: hidden 或 will-change: transform（除非必要），前者可能裁剪动画过程，后者若滥用反而增加渲染开销；
- 若仍存在轻微闪烁，可尝试对父容器 .Container 添加 contain: layout paint 提升合成层稳定性；
- 在移动端需额外考虑 @media (hover: hover) 媒体查询，防止误触缩放。
该方案无需 JavaScript，纯 CSS 实现，兼容现代浏览器（Chrome 4+, Firefox 16+, Safari 9+），兼顾性能与体验一致性。
