CSS border-image关键帧动画在Firefox生效但Chrome失效的问题及疑问

1. 跨浏览器效果差异的原因 #

• border-image 属于复合CSS属性，其可动画性的浏览器实现长期不统一：Chrome/WebKit 内核很长时间未将border-image纳入可动画属性列表，不会对该属性的不同取值做插值计算。同时浏览器样式计算优先级为动画计算值 > 自定义样式 > 默认样式，当元素绑定了动画时，Chrome会优先取关键帧计算后的border-image值；由于该属性不可动画，计算结果为空，会直接覆盖掉元素原本定义的静态border-image样式，最终表现为完全没有边框。
• Firefox 较早实现了对border-image的动画支持，可识别关键帧中渐变角度的变化并渲染插值结果，因此效果可正常运行。

2. Chrome兼容的原生实现方案（无伪元素、无JS） #

有符合要求的纯CSS实现方式，核心是将变化的渐变角度提取为注册过的可插值自定义属性，而非直接在关键帧中修改整个border-image复合属性：

1. 先用@property规则注册指定类型的角度自定义属性，告诉浏览器该属性支持动画插值：

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

2. 将原代码中写死在linear-gradient里的角度替换为该自定义属性，其余样式保持不变：

div {
  color: white;
  width: 300px;
  height: 300px;
  border: 5px solid;
  border-image: linear-gradient(var(--gradient-angle), #ff0000, #00ff00, #0000ff) 1 / 5px;
  animation: move 1s infinite linear;
}

3. 关键帧中仅修改自定义属性的角度值即可，不需要重复写完整的border-image声明：

@keyframes move {
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}

该方案完全不需要伪元素、JS或额外取巧逻辑，Chrome 85及以上版本可正常运行。

3. 平滑过渡的实现方式 #

上述方案已经天然解决了动画生硬卡顿的问题：

• 不需要手动添加25%、50%、75%等中间关键帧，因为通过@property注册的<angle>类型属性支持自动插值，浏览器会自动计算0到360度之间的所有中间角度值，动画全程无跳变。
• 配合animation的时间函数linear，可实现匀速旋转的渐变边框效果，不需要额外调整关键帧结构。

内容的提问来源于stack exchange，提问作者WackGet