border-width动画会触发重排，应慎用；推荐用border-color（需显式rgba）、outline或box-shadow替代，并统一属性写法避免覆盖。
border-width 动画会触发重排，慎用
直接对 border-width 做 CSS 动画（比如从 0px 到 2px）会导致浏览器频繁计算布局，因为边框宽度变化会改变元素尺寸和流式位置。尤其在列表、网格或响应式容器中，容易引发卡顿或跳动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅在静态定位（
position: absolute或fixed）且不参与文档流的元素上使用border-width动画 - 避免在
flex或grid子项上动画border-width，否则可能破坏对齐 - 若必须用，优先配合
will-change: border-width提前告知渲染引擎（但别滥用，会增加内存开销）
border-color 动画更安全，但要注意透明色写法
border-color 是合成属性（compositable），动画时只走 GPU 合成层，不触发布局重排，性能友好。但常见错误是用 transparent 作为起始/结束色——它实际等价于 rgba(0,0,0,0)，而某些旧版 Safari 对透明色插值支持不稳定，可能导致颜色突变或动画中断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
rgba()显式声明透明色，例如rgba(0, 0, 0, 0)而非transparent - 若需渐变边框色，确保所有关键帧都使用同类型颜色值（全
hex、全rgb()或全rgba()），避免浏览器隐式转换导致插值异常 - 可搭配
border-style: solid固定样式，防止border-style变化干扰动画表现
用 outline + box-shadow 模拟“无重排”边框动画
当既要视觉上“边框变粗/变色”，又不能接受 border-width 重排时，可以用 outline（不占布局空间）或 box-shadow（纯绘制层）替代。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
outline支持outline-color和outline-offset动画，但不支持outline-width平滑过渡（部分浏览器会生硬跳变），适合纯色外描边 -
box-shadow: 0 0 0 2px #ff6b6b可模拟 2px 边框，动画box-shadow的模糊半径或扩展半径即可实现“呼吸边框”效果 - 注意：用
box-shadow模拟边框时，要设box-sizing: border-box并预留足够内边距，避免内容被阴影遮挡
关键帧里不要混用 border 简写和单侧属性
在 @keyframes 中同时出现 border: 1px solid red 和 border-top-color: blue 会导致浏览器按简写规则覆盖——后者可能被忽略，或在不同浏览器中行为不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画期间统一用单侧边框属性，如
border-top-color、border-left-width，避免简写 - 若需多侧联动，显式写出全部四侧，例如：
border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; - 检查 DevTools 的“Computed”面板，确认最终生效的
border-color值是否符合预期，特别是动画中途的插值点
animation-timing-function，而是打开 Layers 面板看是否意外触发了 Layout。 
