通过 css 自定义属性（css 变量）动态同步 hover 与 unhover 状态的缩放值，配合 `transition` 与关键帧动画协同控制，可彻底消除反向动画时的突兀跳变，实现真正双向流畅的缩放效果。
在 CSS 动画中，悬停（hover）时缩放流畅，但鼠标移出后元素“瞬间回弹”再执行收缩动画，是常见痛点。其根本原因在于：hover 状态下的 scale 值未被反向动画感知——当鼠标离开时，浏览器直接重置 scale 为初始值（如 .7），导致 @keyframes shrink 实际从 .7 → .7 开始动画（无变化），或因样式层叠冲突而强制跳帧。
你提供的“变量方案”非常巧妙，它利用 CSS 自定义属性 --val 作为状态桥梁，在 strech 动画中实时记录当前生效的 scale 值，并在 shrink 动画中通过 var(--val) 读取该值作为起始点，从而让退出动画“知道”自己该从哪里开始收缩。
但需注意：原方案仍存在两个潜在问题——
- :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 同步状态，杜绝“状态失联”导致的跳变。
