CSS 边框图像关键帧 animation 适用于 Firefox 但不适用于 Chrome

Question

I have a div with a gradient border-image and an animation property which changes the gradient's deg (degrees) in keyframes.

This works perfectly in Firefox but not in Chrome. In fact, in Chrome, the element doesn't have a border at all. It's like the browser simply gives up when it sees the element has an animation property.

Here's a Fiddle:

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. Why does this not work in Chrome but does in Firefox?
2. Is there any way to get this working in Chrome without using pseudo-elements, JavaScript, or other hacky ways?
3. Is there a way to make the gradient changes "fade" smoothly into each other (without simply adding more keyframes) as the animation looks really jerky right now?

Answer 1

Here is an idea using mask:

 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>

In the near future you can do it using CSS variable like below (works only on Chrome and edge for now)

 @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>