本文详解如何通过 CSS 自定义属性（CSS Variables）与 transition 配合 @keyframes，消除 hover/unhover 动画中常见的“跳变”现象，实现真正流畅、可逆的缩放过渡效果。
本文详解如何通过 css 自定义属性（css variables）与 `transition` 配合 `@keyframes`，消除 hover/unhover 动画中常见的“跳变”现象，实现真正流畅、可逆的缩放过渡效果。
在 CSS 动画实践中，一个常见痛点是：当使用 hover 触发 scale 变化时，若同时为常态和悬停态分别定义了 animation（如 shrink 和 stretch），浏览器往往无法自动衔接动画状态——导致 unhover 时元素先“瞬移”回初始 scale 值，再执行退出动画，产生明显抖动或卡顿。
根本原因在于：CSS animation 是单向声明式过程，不具备状态记忆能力；而 transition 虽天然支持双向过渡，但无法直接驱动复杂关键帧序列（如弹性缓动、多段缩放）。原方案混合使用 animation 与 transition，且未同步起始 / 结束状态，造成动画上下文断裂。
✅ 正确解法是： 用 CSS 自定义属性（–val）作为“状态桥接器”，将悬停动画的最终 scale 值实时传递给常态样式，并让 transition 承担主过渡职责，animation 仅用于增强悬停进入的视觉表现 。
以下是优化后的专业级实现：
* {box-sizing: border-box; margin: 0;} body {height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;} .container {/* 核心：启用 scale 的 transition，且初始值与动画起点一致 */ transition: scale 0.45s ease-in-out; margin: 10px; height: 60vh; width: 70vw; background-color: antiquewhite; /* 初始 scale 设为 0.7，同时初始化 --val 为相同值 */ scale: 0.7; --val: 0.7;} .container:hover {/* hover 时仅触发动画，不直接设 scale —— 由 animation 内部控制 */ animation: stretch 1.5s ease-in-out 1 forwards;} @keyframes stretch {0% { scale: var(--val); /* 从当前 --val 值开始（即上一帧结束值）*/ } 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;} }? 关键设计说明：
- –val 在 @keyframes 中持续更新，始终记录当前动画结束时的 scale 值；
- .container 的 transition: scale … 确保 unhover 时能以该 –val 值为起点，平滑过渡回 scale: 0.7；
- 移除了冗余的 shrink 动画——它已被 transition 完全替代，更轻量、更可控；
- forwards 保证动画结束后样式保持在 100% 状态，使 –val: 1 生效，为退出过渡提供正确起点。
⚠️ 注意事项：
- 自定义属性需在 :root 或元素自身作用域内声明，此处直接在 .container 上定义并更新，确保作用域隔离；
- 不要对同一属性（如 scale）同时施加 transition 和 animation，否则行为不可预测；本方案严格分工：animation 负责 hover 进入的精细节奏，transition 负责 unhover 退出的自然衰减；
- 若需支持旧版浏览器（如 IE），应添加 -webkit-transform: scale() 回退，并避免使用 scale 简写（改用 transform: scale()）。
总结：平滑双向缩放的本质，是让进出动画共享可追踪的状态。CSS 变量为此提供了优雅的桥梁，配合语义清晰的 transition 控制，无需 JavaScript 或第三方库，即可达成专业级交互动效。
