通过 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 控制同一属性，这是抖动的根本诱因。
