如何实现 div 悬停缩放时平滑过渡（无抖动、无跳变）-js教程-PHP中文网

如何实现 div 悬停缩放时平滑过渡（无抖动、无跳变）

通过 css 自定义属性（css 变量）动态同步 hover 与 unhover 状态的缩放值，配合 `transition` 与关键帧动画协同控制，可彻底消除反向动画时的突兀跳变，实现真正双向流畅的缩放效果。

在 CSS 动画中，悬停（hover）时缩放流畅，但鼠标移出后元素“瞬间回弹”再执行收缩动画，是常见痛点。其根本原因在于：hover 状态下的 scale 值未被反向动画感知——当鼠标离开时，浏览器直接重置 scale 为初始值（如 .7），导致 @keyframes shrink 实际从 .7 → .7 开始动画（无变化），或因样式层叠冲突而强制跳帧。

你提供的“变量方案”非常巧妙，它利用 CSS 自定义属性 --val 作为状态桥梁，在 strech 动画中实时记录当前生效的 scale 值，并在 shrink 动画中通过 var(--val) 读取该值作为起始点，从而让退出动画“知道”自己该从哪里开始收缩。

但需注意：原方案仍存在两个潜在问题——

Java Development Man

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。

下载

:hover 中未声明 --val 初始值，导致首次 hover 前 --val 为 unset，shrink 动画 0% 读取失败；
过度依赖 animation 而弱化 transition，实际只需 transition: scale 即可更简洁、更可控地实现双向平滑。

✅ 推荐优化方案（纯 CSS，零 JS，兼容现代浏览器）：

.container {
  /* 初始状态 */
  scale: 0.7;
  /* 关键：统一使用 transition 控制 scale，移除冗余 animation */
  transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 可选：添加轻微弹性感（非必须） */
  /* transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); */
}

.container:hover {
  scale: 1;
}

✅ 优势说明： transition 天然支持正向 & 反向双向插值，无需手动管理起始/结束值； cubic-bezier(0.34, 1.56, 0.64, 1) 是一个轻微“过冲+回弹”的缓动函数，比 ease-in-out 更具动感且不生硬；完全避免 @keyframes 冲突、变量未定义、forwards 覆盖等隐性陷阱。

⚠️ 若你坚持保留复杂动画节奏（如先放大→微缩→再定格），则必须确保：

在 .container 根选择器中显式初始化 CSS 变量：

.container {
  --scale-val: 0.7;
  scale: var(--scale-val);
  transition: scale 0.45s ease-in-out;
}
.container:hover {
  --scale-val: 1;
}

并将 scale 属性完全交由 var(--scale-val) 驱动，移除所有 @keyframes 中对 scale 的硬编码赋值，改用 scale: var(--scale-val) 统一响应。

? 总结：
平滑缩放的核心不是堆砌动画，而是让浏览器明确知道“当前值”和“目标值”。优先使用 transition + scale 是最健壮、最易维护的解法；仅当需要逐帧精细控制（如波纹、弹跳序列）时，才引入 @keyframes，并务必通过 CSS 变量或 JavaScript 同步状态，杜绝“状态失联”导致的跳变。