边框动画不连贯的根源是border-width为0时border-color无法参与过渡；应始终保留非零border（如1px solid transparent），并分开过渡border-width和border-color，或改用outline/box-shadow实现更流畅效果。
边框动画不连贯，通常是因为 border-width 和 border-color 无法被浏览器**同时平滑过渡**——尤其是当 border 宽度为 0 时，很多浏览器会跳过 color 的过渡，导致闪烁或卡顿。
问题根源：border-width 为 0 时 color 不触发过渡
当 border: 0 solid #xxx → border: 2px solid #yyy 时，浏览器先“创建边框”（width 从 0→2），再“上色”，中间没有 color 的插值过程。本质是：CSS 认为 border: 0 没有 border 实体，color 属于“未定义状态”，无法参与 transition 或 animation 插值。
解决方案一：始终保留 border，只变 width 和 color
确保起始和结束状态都存在 border（即 width > 0），让 color 和 width 都在同一个渲染实体上变化：
- 用
border: 1px solid transparent作为初始态（非 0） - 动画中改为
border: 2px solid #3b82f6 - 这样 width（1→2）和 color（transparent→#3b82f6）都能被正确插值
解决方案二：用 keyframes 精确控制两属性过渡节奏
避免依赖简写 border，而是分开声明 border-width 和 border-color，并在 keyframes 中同步控制：
立即学习“前端免费学习笔记（深入）”；
@keyframes border-pulse {
0% {
border-width: 1px;
border-color: transparent;
}
50% {
border-width: 2px;
border-color: #3b82f6;
}
100% {
border-width: 1px;
border-color: #94a3b8;
}
}
关键点：
- 所有关键帧中
border-style必须一致（如都为solid），否则 style 切换会中断动画 - 推荐显式设置
border-style: solid在元素基础样式里，避免遗漏 - 加上
transition: border-width 0.3s ease, border-color 0.3s ease可增强 hover 类交互的顺滑感
进阶技巧：用 outline + box-shadow 模拟更流畅边框动效
如果仍想实现“从无到有”的视觉效果，又追求极致连贯，可绕开 border：
-
outline支持透明色过渡（outline: 0 solid transparent→outline: 2px solid #3b82f6），且不会影响布局 -
box-shadow（如box-shadow: 0 0 0 0 #3b82f6）也能模拟边框，并支持完全平滑缩放+颜色过渡 - 两者都不触发重排（reflow），性能更好，尤其适合高频动画
不复杂但容易忽略：只要 border 始终存在（width > 0）、style 固定、color 和 width 分开过渡，CSS 就能自然插值。不需要 JS 或复杂 hack。
