通过 css 自定义属性（css 变量）动态同步 hover 与 unhover 状态的缩放值，结合 `transition` 与 `animation` 协同控制，可彻底消除因状态重置导致的动画跳变，实现双向流畅缩放。

在实现元素悬停缩放动画时，一个常见痛点是：鼠标移出时元素会先“瞬时回退”到原始尺寸，再执行退出动画——这本质上是因为 :hover 状态消失后，CSS 引擎立即重置 scale 值（如从 1 跳回 .7），而 @keyframes shrink 动画却仍从旧值开始播放，造成视觉断层。

你提供的原始代码中，.container:hover 设置了 scale: 1，但 .container 基础样式中写死 scale: .7，且 shrink 动画未感知当前实际缩放值，因此动画始终从 .7 开始收缩，而非从当前 hover 结束时的真实尺寸（例如 1 或 .95）平滑过渡。

✅ 正确解法核心在于：让退出动画「知道」进入动画最终停留在哪个缩放值。CSS 自定义属性（--val）正是为此而生的理想桥梁。

以下是优化后的完整方案（纯 CSS，零 JS，兼容现代浏览器）：

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  /* 初始缩放 + 过渡声明（关键！）*/
  scale: .7;
  transition: scale .45s ease-in-out;

  /* 尺寸与样式 */
  margin: 10px;
  height: 60vh;
  width: 70vw;
  background-color: antiquewhite;

  /* 初始化自定义变量，确保有默认值 */
  --val: .7;
}

/* 悬停时：用动画精细控制缩放曲线，并实时更新 --val */
.container:hover {
  animation: stretch 1.5s ease-in-out 1 forwards;
}

@keyframes stretch {
  0%   { scale: .7; --val: .7; }
  20%  { scale: 1;   --val: 1;   }
  40%  { scale: .9;  --val: .9;  }
  60%  { scale: 1;   --val: 1;   }
  80%  { scale: .95; --val: .95; }
  100% { scale: 1;   --val: 1;   }
}

/* 退出时：动画读取 --val 当前值作为起点，平滑缩回 .7 */
@keyframes shrink {
  0%   { scale: var(--val); }
  100% { scale: .7;         }
}

/* 关键：监听 hover 离开，触发放缩退出动画 */
.container:not(:hover) {
  animation: shrink .45s ease-in-out 1 forwards;
}

⚠️ 注意事项：

• transition 与 animation 可共存：此处 transition: scale 为兜底平滑过渡，而 animation 提供复杂弹性效果；两者不冲突，但需避免对同一属性（如 scale）在相同时机被重复覆盖。
• :not(:hover) 是退出触发器：比依赖 :hover 的反向规则更可靠，确保鼠标移出瞬间即启动 shrink 动画。
• forwards 必不可少：保证动画结束后保留最终帧样式（如 scale: .7），防止样式回弹。
• 浏览器兼容性：scale 和 CSS 变量在 Chrome 100+、Firefox 99+、Safari 15.4+ 中已全面支持；如需兼容旧版 Safari，可用 transform: scale() 替代 scale 属性（语法稍异，但逻辑一致）。

? 进阶提示：若需更高可控性（如暂停/逆向动画），可结合 animation-play-state 或 @property（CSS Houdini）定义受控变量，但本方案已满足绝大多数场景的「零跳变」需求。

总结：平滑双向动画 = 状态感知（CSS 变量） + 显式退出触发（:not(:hover)） + 合理的动画时序与填充模式（forwards）。无需 JavaScript 或第三方库，纯 CSS 即可优雅解决。