通过 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 定义端点，一切水到渠成。
