能否为CSS过渡、动画指定<hue-interpolation-method>，而非仅用于渐变？

不能直接为CSS过渡（transition）或动画（animation）指定<hue-interpolation-method>，这个属性目前仅支持渐变类背景（如linear-gradient、radial-gradient）。不过可以通过间接方式模拟出类似的色相插值效果，核心思路是利用CSS自定义属性+@property来控制色相值，让过渡/动画按色相环的指定路径（短路径/长路径）变化。

模拟过渡的色相插值效果 #

通过@property定义可插值的色相变量，过渡该变量来实现类似<hue-interpolation-method>的效果：

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

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

.box.transition {
  /* 用色相变量生成颜色 */
  background: hsl(var(--hue), 100%, 50%);
  /* 过渡色相变量 */
  transition: --hue 1s linear;
}

/* 短路径插值（默认，0deg→240deg） */
.box.transition:hover {
  --hue: 240deg;
}

/* 长路径插值（模拟longer hue，0deg→360deg→240deg） */
/* .box.transition:hover {
  --hue: 600deg;
} */

对应的HTML：

过渡（hover）——模拟色相插值：
<div class="box transition"></div>

模拟动画的色相插值效果 #

同样借助@property和自定义色相变量，在关键帧中修改色相值来实现：

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

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

.box.animation {
  background: hsl(var(--hue), 100%, 50%);
  animation: color 2s linear infinite;
}

/* 短路径动画（0deg→240deg） */
@keyframes color {
  0% {
    --hue: 0deg;
  }
  100% {
    --hue: 240deg;
  }
}

/* 长路径动画（模拟longer hue，0deg→360deg→240deg） */
/* @keyframes color {
  0% {
    --hue: 0deg;
  }
  100% {
    --hue: 480deg;
  }
} */

对应的HTML：

动画——模拟色相插值：
<div class="box animation"></div>

说明 #

• @property是CSS Houdini的特性，主流现代浏览器已支持（Chrome 85+、Firefox 115+、Safari 16.4+）。
• 通过调整色相变量的最终值，可以控制是走色相环的短路径还是长路径，以此模拟<hue-interpolation-method>的shorter hue或longer hue效果。

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