animation - z-index 的 CSS3 动画问题

Question

我在 this jsFiddle 中有两个元素.每个都在鼠标悬停时通过 :hover 转换展开。

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

Answer 1

由于您正在为所有属性设置动画，因此 z-index 会在动画结束时 进行动画处理并从 0 步进。

只需为您需要的属性添加动画效果即可:

#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/