答案：CSS边框动画需用@keyframes和animation实现，因border-width不支持transition平滑过渡。1. 单边增长动画通过改变border-width实现；2. 四边描边动画利用box-shadow模拟原边框，再分阶段增加border-width；3. 伪元素可创建独立边框层，便于复杂动画控制；4. 注意性能与兼容性，避免重排，推荐现代浏览器使用。
在CSS中实现边框宽度变化的动画，关键在于利用 @keyframes 和 animation 属性控制 border-width 的动态变化。由于 border-width 默认不支持平滑过渡，直接使用 transition 效果有限，因此推荐使用 animation 来精确控制动画过程。
1. 基础边框宽度动画（单边增长）
通过 @keyframes 定义边框从无到有的扩展效果，适用于按钮悬停或卡片强调场景。
.animated-border {
border: 2px solid transparent;
animation: growBorder 1s ease-in-out infinite alternate;
}
@keyframes growBorder {
from {
border-width: 2px;
}
to {
border-width: 10px;
}
}
说明：元素初始边框为2px透明，动画过程中宽度增至10px，配合 infinite 实现来回播放。
2. 四边依次展开动画（描边效果）
模拟“绘制边框”的视觉效果，适合卡片或图片的入场动画。
立即学习“前端免费学习笔记（深入）”；
技巧是结合 box-shadow 模拟原始边框，再用 border 动画覆盖。
.border-draw {
position: relative;
box-shadow: inset 0 0 0 2px #007bff;
border: 2px solid transparent;
animation: drawBorder 2s forwards;
}
@keyframes drawBorder {
0% {
border-top-width: 0;
border-right-width: 0;
}
50% {
border-top-width: 4px;
border-right-width: 4px;
}
100% {
border-width: 4px;
}
}
该动画分阶段增加边框宽度，营造逐步描边的感觉。
3. 使用伪元素实现更灵活的边框动画
当需要复杂动画路径时，可使用 ::before 或 ::after 创建独立边框层。
.fancy-border {
position: relative;
padding: 20px;
}
.fancy-border::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #ff6b6b;
animation: pulseBorder 1.5s ease-out infinite;
}
@keyframes pulseBorder {
0% {
border-width: 2px;
}
50% {
border-width: 8px;
}
100% {
border-width: 2px;
}
}
伪元素独立控制边框动画，不影响内容布局，且支持多层叠加效果。
4. 注意事项与兼容性
- 性能优化：频繁重绘边框可能影响性能，建议对少量关键元素使用。
-
浏览器兼容性：所有现代浏览器均支持
animation和border-width变化，IE10+ 可用。 -
避免 layout thrashing：大幅改变
border-width会触发重排，可用transform: scale()配合透明边框替代。
