CSS边框-图像关键帧动画工作在火狐，但不是在Chrome

Question

我有一个带有渐变div的border-image和一个animation属性，它在关键帧中改变梯度的deg (度数)。

这在Firefox中非常有效，但在Chrome中却不起作用。事实上，在Chrome中，元素根本没有边框。这就像浏览器看到元素具有animation属性时就干脆放弃了。

这是一个小屁屁：

https://jsfiddle.net/0nymc9ej/2/

​

body {
  background: black;
}

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

@keyframes move {
    0%   { border-image: linear-gradient(0deg, #ff0000, #00ff00, #0000ff) 1 / 5px; }
  25%  { border-image: linear-gradient(90deg, #ff0000, #00ff00, #0000ff) 1 / 5px; }
  50%  { border-image: linear-gradient(180deg, #ff0000, #00ff00, #0000ff) 1 / 5px; }
  75%  { border-image: linear-gradient(270deg, #ff0000, #00ff00, #0000ff) 1 / 5px; }
  100% { border-image: linear-gradient(360deg, #ff0000, #00ff00, #0000ff) 1 / 5px; }
}

<div>This has a nice moving border in Firefox but not in Chrome</div>

​

1. 为什么在Chrome中不起作用，但在火狐中却起作用？
2. 有没有办法在不使用伪元素、JavaScript或其他恶意方式的情况下在Chrome中工作？
3. 是否有办法使渐变变化“淡入”彼此(而不只是添加更多的关键帧)，因为动画现在看起来真的很不稳定？

Answer 1

下面是一个使用掩码的想法：

​

body {
  background: black;
}
.box {
  color: white;
  width: 300px;
  height: 200px;
  position:relative;
  padding:5px; /* this will control the border width */
  overflow:hidden;
}
.box div{
  content:"";
  position:absolute;
  inset:0; /* shorthand of top right bottom left */
  padding: inherit;
  /* make the gradient visible only inside the padding area */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) padding-box;
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  /**/
}
/* a rotating gradient layer */
.box div::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(#ff0000, #00ff00, #0000ff);
  animation: move 1s infinite;
}
@keyframes move {
  100% { transform:rotate(360deg); }
}

<div class="box">
 <div></div>
This has a nice moving border</div>

​

在不久的将来，您可以使用如下所示的CSS变量(目前只在Chrome和edge上工作)

​

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

body {
  background: black;
}

div {
  color: white;
  width: 300px;
  height: 200px;
  border: 5px solid;
  --a:0deg; /* fallback for FF to see the border */
  border-image: linear-gradient(var(--a), #ff0000, #00ff00, #0000ff) 1 / 5px;
  animation: move 1s infinite;
}

@keyframes move {
   100%{--a:360deg}
}

<div>This has a nice moving border</div>

​