如何实现 div 悬停与移出时平滑、无跳变的缩放动画

本文详解如何通过 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，彻底告别生硬“闪回”，达成专业级交互动效体验。