这确实是Chromium内核特有的一个有趣行为——当嵌套元素通过inherit继承由CSS变量控制的颜色时，Transition会从外层到内层依次触发，形成级联动画，而非同步变化。下面我来帮你分析原因并给出几种可行的解决方案：

问题原因 #

在Chromium中，当元素通过inherit获取属性值时，浏览器会将每个嵌套层级的属性变化视为独立的触发事件：外层元素先完成Transition动画，内层元素才会感知到继承值的变化并启动自己的Transition，最终呈现出逐层延迟的级联效果。而当元素直接使用var(--color)时，CSS变量的变化会同时触发所有关联元素的Transition，因此所有元素同步动画。

解决方案 #

方案1：直接使用CSS变量替代inherit #

如果业务允许，最简单的方式就是让所有嵌套元素直接引用CSS变量，而非通过inherit继承：

<div class="test">
  Text level1
  <div class="test">
    Text level2
    <div class="test"> Text level3 </div>
  </div>
  <button id="change"> ChangeColor </button>
</div>

::root{ --color: black; }
* { transition: color 1s; color: var(--color); }
/* 移除inherit，直接使用变量 */
.test { color: var(--color); }

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
  toggler = !toggler;
  document.documentElement.style.setProperty('--color', toggler ? "black" : "red");
})

这样所有元素都会同步响应CSS变量的变化，Transition同时触发，颜色即时同步改变。

方案2：仅给根元素添加Transition #

如果必须保留inherit，可以把Transition仅绑定到根元素上，子元素继承颜色但不单独设置Transition：

::root{ 
  --color: black; 
  /* 只给根元素添加Transition */
  transition: color 1s;
  color: var(--color);
}
* { color: inherit; }
.test { color: inherit; }

此时只有根元素会执行颜色过渡动画，所有子元素会直接继承根元素的当前颜色值，不会产生级联延迟，实现同步变化。

方案3：禁用子元素的Transition #

通过重置子元素的Transition属性，让它们不继承父元素的Transition行为：

::root{ --color: black; }
* { transition: color 1s; color: var(--color); }
.test { 
  color: inherit; 
  /* 禁用子元素的Transition */
  transition: none;
}

这样当根元素颜色变化时，子元素会直接继承新的颜色值，不会有动画延迟，达到即时变化的效果。

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