如何消除 CSS 缩放悬停时的闪烁抖动（Flickering）问题-html教程-PHP中文网

如何消除 CSS 缩放悬停时的闪烁抖动（Flickering）问题

本文详解通过添加 transform-origin 和 ease 缓动函数，解决 .ChoseContainer 元素在左右区域快速切换悬停时因变换原点默认偏移导致的缩放闪烁问题，实现平滑、居中、无跳变的 Zoom 效果。

本文详解通过添加 `transform-origin` 和 `ease` 缓动函数，解决 `.chosecontainer` 元素在左右区域快速切换悬停时因变换原点默认偏移导致的缩放闪烁问题，实现平滑、居中、无跳变的 zoom 效果。

CSS 中的 transform: scale() 默认以元素左上角（0 0）为变换原点。当两个并排的 .ChoseContainer（各占 50% 宽度）紧邻布局时，鼠标从右侧容器快速移向左侧容器，浏览器可能因 hover 状态切换瞬间触发两次独立的 scale 动画——且因原点未显式指定，每次缩放都从左上角拉伸，造成视觉“抽搐”或“抖动”，即你观察到的 flickering。

关键修复有两点：

显式设置变换原点：添加 transform-origin: center center，确保缩放始终围绕元素中心进行，避免边缘拉伸带来的位移感；
优化缓动函数：将 transition: transform 0.2s 升级为 transition: transform 0.2s ease，用更自然的缓入缓出曲线替代默认的线性过渡，显著提升动画流畅度。

修正后的完整 CSS 如下：

CSS婚礼策划服务机构宣传网站模板

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);  /* ✅ 现在稳定围绕中心缩放 */
}

✅ 额外建议（进阶平滑）：

若仍存在轻微闪烁，可尝试增加 will-change: transform（仅对 .ChoseContainer），提前提示浏览器该元素将频繁变换，启用硬件加速；
避免在 :hover 中同时修改 width/height 或触发布局（layout）属性，否则会强制重排（reflow），破坏 transform 的合成层优势；
scale(1.1) 可根据设计需求微调（如 1.08 更克制，1.15 更动感），但建议保持 ≤1.2 以保障可读性与性能。

最终效果：鼠标在左右容器间任意穿梭，缩放动画始终平稳、连贯、居中展开，彻底告别突兀跳变。