为何时长相同的CSS Transition完成时间不一致？

问题描述 #

我有两个嵌套元素A和B，外层元素A与内层元素B尺寸一致，B包含文本内容。两者均配置了时长为1秒的CSS Transition：hover状态下A改变文本颜色，B改变背景色。代码如下：

CSS代码 #

#A {
  color: red;
  transition: all 1s;
}

#B {
  font-size: 100px;
  background-color: red;
  transition: all 1s;
}

#A:hover {
  color: green;
}

#B:hover {
  background-color: green;
}

HTML代码 #

<div id="A">
  <div id="B">Example Text</div>
</div>

原本预期两个过渡会同时完成，但背景色过渡比文本颜色过渡先结束，请问该现象的成因是什么？

原因解析 #

这个差异来自hover状态的触发与事件传播顺序，以及浏览器对元素hover状态的判定逻辑：

• 触发阶段：当鼠标移入元素时，首先触发内层B的hover状态，它的背景色过渡会立刻启动；而外层A的hover状态虽会同步激活，但由于事件冒泡的微小延迟，文本颜色过渡的启动时间略晚于B。
• 结束阶段：当鼠标移出元素时，B的hover状态会先被解除（鼠标首先离开B的范围），背景色的反向过渡率先开始；而A的hover状态需要等到鼠标完全离开自身边界才会失效，反向过渡启动时间更晚。

两者过渡时长都是1秒，但因为启动时间存在先后差，就会出现B的背景色过渡先完成、A的文本颜色过渡后结束的视觉效果。

另外还有一个细节：B未设置自身的color属性，文本颜色继承自A，浏览器对继承属性的过渡渲染优先级略低于元素自身属性，这也会加剧视觉上的不同步感。

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