使用伪元素缩放或透明边框配合transition可避免border-width动画跳动。1. 通过::before伪元素结合transform: scaleX()模拟边框展开，利用GPU加速；2. 预设border-width并用border-color透明度控制显隐，仅触发重绘；3. 选用cubic-bezier(0.25,0.46,0.45,0.94)等缓动函数提升流畅度，避免布局重排是关键。
在使用 CSS 的 transition 对边框宽度（border-width）进行动画过渡时，常会出现视觉上的“跳动”或“卡顿”现象。这通常是因为浏览器在处理边框尺寸变化时涉及布局重排（reflow），尤其当边框从 0 变为有值或反之，容易导致渲染异常。虽然不存在名为 transition-border-width 的标准属性（CSS 中没有该属性），但我们可以通过正确的技巧和 timing-function 配合来优化这一过程。
理解 border-width 过渡为何异常
边框宽度的变化会直接影响元素的盒模型尺寸（除非使用 box-sizing: border-box 并提前预留空间），从而触发页面布局重新计算。这种重排会导致动画不流畅，尤其是在快速悬停或交互频繁的场景中。
常见问题包括：
- 边框突然“弹出”，没有平滑过渡
- 动画开始或结束时出现闪烁
- 在某些浏览器中动画卡顿或跳帧
解决方案一：用 transform 模拟边框扩展
避免直接改变 border-width，转而使用 transform: scaleX() 或 scaleY() 来模拟边框增长效果。这种方式利用 GPU 加速，性能更好。
立即学习“前端免费学习笔记（深入）”；
示例：通过伪元素模拟边框并缩放
.element {
position: relative;
}
.element::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: #000;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.element:hover::before {
transform: scaleX(1);
}
这样视觉上像边框展开，但实际是伪元素的缩放，不会影响布局。
解决方案二：预设边框并控制透明度
将边框始终存在，但通过颜色透明度（border-color: transparent）控制其可见性，再配合 transition 实现平滑切换。
.element {
border: 2px solid transparent;
transition: border-color 0.3s ease-out;
}
.element:hover {
border-color: #007acc;
}
这种方法避免了尺寸变化，仅触发重绘（repaint），动画更流畅。
优化 timing-function 提升视觉体验
选择合适的 transition-timing-function 能让过渡更自然。对于边框类动画，推荐使用缓入快出或弹性曲线：
-
ease-out：开始快，结束慢，适合进入动画 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：轻微回弹，增强动感 -
ease-in-out：对称过渡，适合双向切换
结合上述透明边框方案，可写出更细腻的动画：
.element {
border: 3px solid transparent;
transition: border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
基本上就这些。虽然不能直接用 transition-border-width 解决问题，但通过规避布局重排、使用伪元素或透明边框配合精心设计的 timing-function，完全可以实现丝滑的边框过渡效果。关键是不让 border-width 的变化牵动整体尺寸。
