通过 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 即可优雅解决。
