为什么这是CSS过渡队列

Question

当我悬停在 div上时，颜色变化发生在 div content 之前 颜色变化会影响 span。为什么这是我该如何拥有的，以便两个动画同时发生？* { transition: ... }的原因是，默认情况下，如果其属性会更改。

http://jsfiddle.net/wf63jquz/

html：

<div>
    <span>Hello</span>
    Hola
</div>

CSS：

*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}
div {
    color: red;
}
div:hover
{
    color: green;
}

*编辑*

eugh，不想检查其他浏览器。新问题：Chrome为什么做错了，我该如何解决Chrome？我想这可能是一个通用的WebKit问题，但我无法快速访问Safari进行检查。

Answer 1

它是因为 * ..如果您使用下面的代码，它将为您提供所需的结果：

div:before,div:after{
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;
transition: 2s;}

Answer 2

尝试此

*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}
div, span {
    color: red;
}
div:hover, span:hover
{
    color: green;
}

<div>
    <span>Hello</span>
    Hola
</div>

Answer 3

这似乎是Chrome的一个问题，因为它首先将所有标准HTML元素动画起来，然后再处理其余内容。

为了解决这个问题，看来包裹您的内容外部标签外部的内容，可行。因此，您的HTML将是：

<div>
    <span>Hello</span>
    <span>Hola</span>
</div>

演示

正如@BoltClock所说，这些"怪癖"取决于过渡仍在草稿中的事实，因为似乎没有人使它们变得非常完美：）