为什么相同持续时间的转换需要不同的时间？

Question

我有两个嵌套元素： A和B 。 外部元素A与内部元素B的大小相同。 元素B包含一些文本。 两个元素都有一个持续时间为一秒的 CSS 过渡。 在 hover 上， A更改了文本颜色，而B更改了背景颜色。

 #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; }

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

我预计过渡会同时完成，但是背景过渡在文本过渡之前完成。 是什么导致了这种行为？

Answer 1

这是由这个 Chrome 错误（和这个 Webkit错误）引起的。
基本上他们确实在每个级别触发一次继承属性的转换，并且每个级别都会延迟下一个级别的转换持续时间。

您可以通过确保继承的属性（此处为color ）仅转换一次来避免此问题：

 #A { color: red; transition: all 1s; } #B { font-size: 100px; background-color: red; transition: background-color 1s; /* limit this transition to bg-color only */ } #A:hover { color: green; } #B:hover { background-color: green; }

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

或者

 #A { color: red; } #B { font-size: 100px; background-color: red; transition: all 1s; /* set the transition only on the child */ } #A:hover { color: green; } #B:hover { background-color: green; }

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