为什么这个 CSS 转换要排队？

Question

当我将鼠标悬停在 上时，在颜色变化影响之前，内容div上会发生颜色变化。这是为什么？我怎样才能让两个动画同时发生？这样做的原因是，默认情况下，站点的每个元素都会有动画，以防其属性发生变化。divspan* { 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;
}

*编辑*

呃，没想到要检查其他浏览器。新问题：为什么 Chrome 会出错，我该如何解决 Chrome 的问题？我猜这可能是一个常见的 webkit 问题，但我无法快速访问 Safari 进行检查。

Answer 1

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

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