本文详解如何通过 css 自定义属性（css 变量）配合 transition 与 @keyframes，消除 hover 动画在取消悬停时的“跳变”现象，实现真正双向流畅的缩放过渡效果。
本文详解如何通过 css 自定义属性（css 变量）配合 transition 与 @keyframes，消除 hover 动画在取消悬停时的“跳变”现象，实现真正双向流畅的缩放过渡效果。
在 Web 动画开发中，一个常见却易被忽视的问题是：当使用 :hover 触发 scale 动画时，若仅对 :hover 状态设置 animation，而未妥善处理「退出动画」，浏览器会立即丢弃当前动画状态，重置元素为初始样式（如 scale: 0.7），再启动 shrink 动画——这导致视觉上的突兀“回弹”或“跳帧”，破坏用户体验。
根本原因在于：CSS 动画（animation）默认不可逆，且 :hover 离开时不会自动播放反向动画；同时，transition 与 animation 混用易引发冲突。原代码中 .container 设置了 transition: .45s，但 :hover 却使用 animation，二者作用于同一属性（scale）却无协调机制，造成状态覆盖与时机错乱。
✅ 正确解法：用 CSS 自定义属性（--val）作为动画状态的“桥梁”，让进入与退出共用同一套可插值的缩放逻辑，并全程由 animation 驱动，避免 transition 干预干扰。
以下是优化后的核心 CSS 实现：
.container {
margin: 10px;
height: 60vh;
width: 70vw;
background-color: antiquewhite;
scale: 0.7; /* 初始缩放 */
--val: 0.7; /* 关键：声明初始变量值 */
animation: shrink 0.45s ease-in-out 1 forwards;
}
.container:hover {
animation: stretch 1.5s ease-in-out 1 forwards;
}
@keyframes stretch {
0% { scale: var(--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; }
}
@keyframes shrink {
0% { scale: var(--val); } /* 从 hover 结束时的 --val 值开始 */
100% { scale: 0.7; --val: 0.7; }
}? 关键设计解析：
- --val 在 stretch 动画中持续更新，记录当前缩放目标值；
- shrink 动画首帧读取 var(--val)，确保退出动画从 hover 结束时的实际缩放值平滑回落，而非强制跳回 0.7；
- 所有动画均使用 forwards，保证动画结束后样式保持最后一帧状态，维持 --val 的有效性；
- 移除了冗余的 transition 声明，彻底规避 transition 与 animation 对 scale 的竞争。
⚠️ 注意事项：
- 变量作用域需注意：--val 定义在 .container 元素上，@keyframes 中 var(--val) 能正确继承其运行时值，前提是动画在该元素上触发（本例满足）；
- 不要省略 forwards：若缺少 animation-fill-mode: forwards，动画结束后 --val 将恢复为初始声明值（0.7），导致下次 hover 时 stretch 从 0.7 开始，失去“记忆性”；
- 性能建议：scale 属于可硬件加速属性，优于 transform: scale() 的写法（两者等效，但 scale 更语义化）；避免在动画中频繁修改 width/height 等触发布局的属性；
- 兼容性提醒：scale 和 CSS 变量均为现代标准（Chrome 102+、Firefox 99+、Safari 15.4+ 支持良好），如需支持旧版 Safari，可回退至 transform: scale() + --scale-val 配合 transform: scale(var(--scale-val))。
? 进阶提示：此模式可扩展至其他动态属性（如 opacity、rotate、颜色渐变），只需将对应值同步写入自定义变量，并在反向动画中读取即可，实现真正“状态感知”的双向动画系统。
通过这一方案，你将获得一个无 JS、无第三方库、语义清晰且高度可控的平滑缩放交互体验——悬停时富有弹性的伸展，移出时自然柔顺地收缩，全程无跳变、无闪烁、无卡顿。
