列表项 hover 缩放引发相邻元素跳动的本质原因是 width、height、padding 或 margin 在 :hover 中被修改触发重排，正确解法是仅用 transform: scale() 配合 transform-origin: center 和 transition: transform 0.2s ease，避免任何盒模型变更。

列表项 hover 缩放引发相邻元素跳动的本质原因

根本不是动画写得不够“平滑”，而是 width、height、padding 或 margin 在 :hover 中被修改，直接触发浏览器重排（reflow）。每个 li 的尺寸变化都会迫使后续所有兄弟元素重新计算位置——尤其在垂直排列的 ul 中，抖动肉眼可见。

用 transform: scale() 替代盒模型修改

这是最直接有效的解法：缩放发生在合成层，不改变文档流占位，兄弟元素完全感知不到变化。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• transform: scale(1.1) 必须配合 transform-origin: center（显式写出更稳妥）
• 绝对不要同时设置 width 或 height 动画，哪怕只写一行也会让整套方案失效
• 若需“撑开背景色”，用 background-color + padding 预留空间，别靠缩放去“挤”出来
• display: block 或 inline-block 是前提，纯 inline 元素对 transform 支持不稳定

避免快速移入移出时的视觉抽搐

鼠标在相邻 li 之间快速划过，容易因原点偏移和过渡生硬造成“跳帧”错觉，不是 bug，是默认行为。

• 必须写 transition: transform 0.2s ease，ease 比默认线性过渡自然得多
• transform-origin: center center 确保每次缩放都严格以几何中心为基准
• 加 will-change: transform 提示浏览器提前创建独立合成层，高刷屏下效果更稳
• 父容器 ul 建议加 overflow: hidden，防止缩放溢出干扰布局

复杂场景下仍抖动？检查这些隐性干扰源

即使上述都做了，抖动还存在，大概率是其他层在偷偷改尺寸。

• 字体加载策略：font-display: swap 可能导致文字重排，继而影响 li 高度
• 滚动条动态出现/消失：整个页面宽度突变会带动所有 flex 或百分比布局元素位移，可加 html { overflow-y: scroll } 锁定宽度
• Isotope 或其他 JS 布局库：全局 transition: all 会干扰其内部重排逻辑，应只对目标属性设 transition
• mix-blend-mode、filter 等合成属性若与 transform 同时使用，可能触发额外重绘，需单独测试

真正稳定的悬停缩放，不在于“怎么动得好看”，而在于“怎么动得不动别人”。只要没动盒模型，抖动就没了；但一旦混入任何尺寸类声明，整个链条就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！