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

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

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

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

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

1. :hover 中未声明 –val 初始值，导致首次 hover 前 –val 为 unset，shrink 动画 0% 读取失败；
2. 过度依赖 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 同步状态，杜绝“状态失联”导致的跳变。