如何实现 div 悬停缩放时的平滑双向过渡动画_网络技术

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

# css # js # 浏览器 # safari # ai # 为什么 # firefox # chrome # webkit # 堆 # var

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】