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

在 CSS 动画中，悬停（hover）时缩放流畅，但移出时却“啪”地一下跳回原尺寸——这是因 animation 和 transition 机制冲突导致的典型问题：原代码中 .container 使用 animation: shrink ... forwards 设定了最终状态（scale: .7），而 :hover 又用 animation: strech ... 覆盖；当鼠标移出时，浏览器无法自动将 strech 动画的当前 scale 值作为 shrink 动画的起点，而是直接从 scale: 1（未声明时的计算值）开始收缩，造成视觉跳变。

✅ 正确解法：用 CSS 自定义属性（--val）桥接状态，让 shrink 动画始终以 strech 动画结束时的 scale 值为起点，实现无缝衔接。

以下是优化后的完整方案（纯 CSS，零 JS，不依赖 GSAP）：

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

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

.container {
  /* 初始缩放 + 过渡基础 */
  scale: 0.7;
  transition: scale 0.45s ease-in-out;

  /* 关键：初始化 --val，确保未 hover 时 shrink 动画有明确起点 */
  --val: 0.7;

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

/* 悬停：触发动画，并实时更新 --val */
.container:hover {
  animation: stretch 1.5s ease-in-out forwards;
}

@keyframes stretch {
  0%   { scale: 0.7; --val: 0.7; }
  20%  { scale: 1;   --val: 1;   }
  40%  { scale: 0.9; --val: 0.9; }
  60%  { scale: 1;   --val: 1;   }
  80%  { scale: 0.95; --val: 0.95; }
  100% { scale: 1;   --val: 1;   }
}

/* 移出：shrink 动画从 --val（即 hover 结束时的 scale）平滑缩回 0.7 */
@keyframes shrink {
  0%   { scale: var(--val); }
  100% { scale: 0.7; }
}

/* 移出时触发 shrink 动画 —— 注意：需通过 :not(:hover) 或 JavaScript 触发，但更推荐用 transition 主导 */
/* ✅ 更优实践：完全弃用 shrink 动画，仅靠 transition 实现反向过渡！ */

⚠️ 重要优化提示（超越原答案）：
原方案虽用 --val 解决了起点同步问题，但仍混合使用 animation（hover）与 animation（unhover），逻辑冗余且难以维护。真正简洁、健壮的做法是：仅用 transition 控制双向缩放，用 :hover 直接设置目标 scale，由浏览器自动插值反向动画：

.container {
  scale: 0.7;
  transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* 增强缓动感 */
}

.container:hover {
  scale: 1;
}

✅ 优势：

• 零动画帧定义，无状态同步风险；
• 移出时自动按相同 transition 反向执行，天然流畅；
• 若需“弹性效果”，可用 cubic-bezier() 自定义缓动（如示例中的过冲曲线），或叠加 transform: scale() 配合 will-change: transform 提升性能。

? 总结建议：
优先采用 transition + :hover { scale } 方案，它语义清晰、兼容性好（Chrome 105+ / Firefox 72+ / Safari 15.4+ 完美支持 scale）、性能优异；仅在需要复杂关键帧序列（如多段弹跳）时，才启用 animation + CSS 变量方案，并务必确保 forwards 与 --val 的生命周期严格对齐。避免同时混用 animation 和 transition 控制同一属性，这是抖动的根本诱因。