通过 css 自定义属性（css 变量）动态同步 hover 与 unhover 状态的缩放起始值，配合 `transition` 与 `animation` 协同控制，可彻底消除反向动画“跳变”，实现真正流畅的双向缩放效果。
在 CSS 动画中，悬停（hover）时缩放平滑，但鼠标移出时元素却“瞬间回弹”再执行退出动画——这是因 :hover 状态移除后，浏览器重置了 scale 值（回到未声明的默认 1），导致 @keyframes shrink 实际从 scale: 1 开始而非当前实际缩放值，从而产生视觉跳变。
根本解法：用 CSS 自定义属性（--val）桥接状态，让退出动画“知道”当前缩放起点。
核心思路是：
✅ 不直接依赖 scale 的静态初始值；
✅ 在 :hover 动画中，用 --val 实时记录每一帧的 scale 值；
✅ 在 @keyframes shrink 中，首帧读取 var(--val) 作为真实起始缩放值，确保退出动画无缝衔接。
以下是优化后的完整、可运行方案（已剔除冗余代码，强化可维护性）：
* {
box-sizing: border-box;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
}
.container {
/* 初始状态：设为 scale(0.7)，并初始化 --val */
--val: 0.7;
scale: var(--val);
transition: scale 0.45s ease-in-out; /* 关键：启用 transition 作为基础过渡层 */
margin: 10px;
height: 60vh;
width: 70vw;
background-color: antiquewhite;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.container:hover {
--val: 1; /* hover 时主动更新变量，供 transition 和动画读取 */
scale: var(--val);
}
/* 可选：如需更丰富的悬停动效（如弹性效果），仍可用 animation，
但务必添加 `forwards` 且避免与 transition 冲突 —— 推荐仅用 transition 实现基础缩放，
复杂动效建议用 JS 控制或分离 transform 层级 */✅ 推荐实践（更简洁稳健）： 实际项目中，优先使用纯 transition + scale，无需 keyframes。上述 @keyframes 方案虽巧妙，但存在隐患： animation 与 transition 同时作用于 scale 易引发优先级冲突； --val 在 shrink 动画中依赖 :hover 移除前的最后值，而 :hover 状态消失瞬间变量可能未及时固化。 更可靠写法如下（无 JS，零依赖）：
.container {
scale: 0.7;
transition: scale 0.45s 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 更自然；
- 零变量、零动画帧，结构清晰，易于调试和复用。
注意事项总结：
- ❌ 避免同时对同一属性（如 scale）既设 transition 又设 animation，易覆盖或竞争；
- ✅ 若必须用 @keyframes（如需多段弹性效果），请确保 animation-fill-mode: forwards 且 animation-direction: normal，并在 :hover 移出时通过 JS 或 :not(:hover) 补充兜底逻辑；
- ? 兼容性：scale 和 CSS 变量在现代浏览器（Chrome 102+、Firefox 97+、Safari 15.4+）中完全支持；旧版 Safari 可加 -webkit-transform: scale() 回退。
最终，平滑动画的本质不是堆砌技巧，而是让浏览器明确知道“从哪来、到哪去、怎么走”——用 transition 声明路径，用 scale 定义端点，一切水到渠成。
