是否可以将 <hue-interpolation-method> 与动画或过渡一起使用？

Question

是否可以为除渐变之外的任何内容指定 ；具体来说：过渡或动画？

.box {
  width: 300px;
  height: 50px;
}

.box.gradient {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

.box.transition {
  background: red;
  transition: 1s all;
}
  .box.transition:hover {
    background: blue;
  }
  
.box.animation {
  animation-name: color;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}

Linear-gradient using hue interpolation:
<div class="box gradient"></div>
<br><br>
Transition (hover) -- how do I get it to use the hue interpolation?
<div class="box transition"></div>
<br><br>
Animation -- how do I get it to use the hue interpolation?
<div class="box animation"></div>

Answer 1

一个黑客想法是继续使用渐变并转换位置：

.box {
  width: 300px;
  height: 50px;
  background-image: linear-gradient(90deg in hsl longer hue, red, blue);
}

.box.transition {
  background-size: 10000% 100%; /* a very big width to see only colors and no transitions */
  background-position: left;
  transition: 1s all;
}

.box.transition:hover {
  background-position: right;
}

.box.animation {
  background-size: 10000% 100%;
  animation-name: color;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

Linear-gradient using hue interpolation:
<div class="box gradient"></div>
<br><br> Transition (hover) -- how do I get it to use the hue interpolation?
<div class="box transition"></div>
<br><br> Animation -- how do I get it to use the hue interpolation?
<div class="box animation"></div>