CSS3 动画与 z-index 的问题

Question

我在这个 jsFiddle中有两个元素。每个都会在鼠标悬停时通过:hover过渡进行扩展。

我希望蓝色动画与红色动画相匹配。现在，当鼠标悬停时，红色的会扩展到蓝色的上方，但蓝色的会扩展到红色的下方。我希望每个动画都超越另一个动画。这可能可以通过更改 z-index 来完成，:hover但这似乎效果不太好。

Answer 1

由于您要对所有属性进行动画处理，因此 z-index 会进行动画处理，并在动画结束时从 0 步进到 1 。

只需为您需要的属性设置动画即可：

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    -webkit-transition: width .6s ease-in-out;
    -moz-transition: width .6s ease-in-out;
    -o-transition: width .6s ease-in-out;
    -ms-transition: width .6s ease-in-out;
    transition: width .6s ease-in-out;
}

http://jsfiddle.net/duopixel/hfM7E/