鼠标离开时悬浮卡回跳本质是布局重排导致的视觉断层，需用transform替代top/left、加pointer-events:none切断事件干扰、做边界检测防抽搐，并确保hover前后尺寸位置一致。

鼠标离开时悬浮卡回跳，本质是布局重排触发的视觉断层

不是动画没写好，而是 top/left 这类位移属性在 hover 状态切换时强制触发布局计算（reflow），浏览器来不及平滑过渡，导致卡片“闪一下再归位”。尤其当父容器或兄弟元素尺寸不稳定时，回跳会更明显。

用 transform 替代 top/left 是唯一可靠解法

直接改 top 或 left 会让浏览器反复重算文档流位置；而 transform: translateY() 只走合成层（composite），GPU 加速，无重排风险。

• 必须给悬浮卡加 position: absolute 或 relative，否则 transform 不生效
• transition 只写 transform 和 opacity，别混入 top、margin 等高成本属性
• 清空所有位移类初始值：确保常态下没有 top: 0 + transform: translateY(10px) 这种叠加写法

pointer-events: none 能切断闪烁循环链

当悬浮卡覆盖了触发区域（比如导航指示器 #indicator），鼠标移出原元素后瞬间落在卡片上，又触发新 hover，造成高频闪烁。这不是动画问题，是事件捕获干扰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给悬浮卡本身加 pointer-events: none，它仍可见、可动画，但不抢 hover 状态
• 不要用 visibility: hidden 或 opacity: 0 替代——前者会丢失动画占位，后者仍响应鼠标
• 如果卡片内需交互（如按钮），只对非交互区域设 pointer-events: none，或用子元素单独控制

边界检测缺失会导致视口边缘“抽搐式回跳”

没做位置校验时，卡片在右下角悬停可能被截断，浏览器自动 fallback 到左侧/上方，这个过程无过渡，看起来就是“突然弹回去”。

立即学习“前端免费学习笔记（深入）”；

• JS 动态设置 transform 时，必须计算 getBoundingClientRect() 并对比视口尺寸
• 纯 CSS 方案里，可用 :has() 做简单 fallback（如 .trigger:has(+ .card:hover) ~ .card），但 Safari 15.4+ 才支持
• 移动端记得监听 touchstart 并 preventDefault()，否则 iOS 可能忽略 hover

真正稳定的悬浮卡，hover 前后 getBoundingClientRect().width 和 x 必须完全一致——这点肉眼看不到，但开发者工具里一查就露馅。