本文详解如何通过 CSS 自定义属性（CSS Variables）协同 transition 与 @keyframes，消除 hover 动画在 unhover 阶段的突兀回弹，实现双向流畅缩放效果，无需 JavaScript 或第三方动画库。
本文详解如何通过 css 自定义属性（css variables）协同 `transition` 与 `@keyframes`，消除 hover 动画在 unhover 阶段的突兀回弹，实现双向流畅缩放效果，无需 javascript 或第三方动画库。
在 CSS 动画实践中，一个常见痛点是：当为元素设置 hover 状态下的 scale 变化并搭配 @keyframes 时，鼠标移出后元素常会“硬切”回初始状态（如直接跳回 scale: 0.7），而非沿原动画路径反向平滑还原——这是因为浏览器无法自动逆向播放 animation，且 transition 与 animation 混用时易产生冲突。
根本原因在于：原始代码中 .container 和 .container:hover 分别绑定了独立的 animation（shrink 和 strech），而 animation 是单向执行的，且 unhover 时浏览器会立即丢弃 hover 的动画上下文，重置为静态样式（此时 scale: .7 被强制应用），导致视觉跳变。
✅ 正确解法：用 CSS 自定义属性桥接状态，让 unhover 动画能“记住”当前缩放值，并驱动反向过渡
核心思路是：
- 利用 --val 自定义属性动态记录 hover 过程中任意时刻的 scale 值；
- 在 @keyframes shrink 中读取 --val 作为起始值（0% { scale: var(--val); }），使收缩动画从当前缩放态自然回落；
- 移除 .container 上冗余的 transition（它与 animation 冲突），仅保留动画控制；
- 所有动画均使用 forwards 填充模式，确保结束帧样式持续生效。
以下是优化后的完整 CSS 实现：
* {
box-sizing: border-box;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container {
/* 初始缩放 + 首次加载收缩动画 */
scale: 0.7;
animation: shrink 0.45s ease-in-out 1 forwards;
/* 关键：初始化自定义属性，避免未定义时 fallback 失效 */
--val: 0.7;
/* 尺寸与样式 */
margin: 10px;
height: 60vh;
width: 70vw;
background-color: antiquewhite;
}
.container:hover {
/* 触发伸展动画，全程更新 --val */
animation: stretch 1.5s ease-in-out 1 forwards;
}
@keyframes stretch {
0% {
scale: 0.7;
--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% {
/* 从 hover 结束时的 --val 值开始过渡 */
scale: var(--val);
}
100% {
scale: 0.7;
}
}? 关键注意事项：
- --val 必须在 .container 基础选择器中初始化（如 --val: 0.7），否则 shrink 动画首帧读取 var(--val) 会因未声明而回退到 initial（即 unset），导致不可预期行为；
- 动画时间无需严格对称：stretch 可设计得更舒缓（如 1.5s），shrink 保持轻快（如 0.45s），符合「进入强调、退出收敛」的动效心理学；
- 避免同时对同一属性（如 scale）混用 transition 和 animation——二者竞争控制权，是跳变主因；
- 此方案纯 CSS，兼容 Chrome 103+、Firefox 110+、Safari 16.4+（需启用 prefers-reduced-motion 降级逻辑时可额外补充媒体查询）。
最终效果：无论用户在 stretch 动画的任意中间帧移出鼠标，.container 都将从该帧对应的 --val 值平滑缩回到 0.7，彻底告别生硬“闪回”，达成专业级交互动效体验。
