z-index 的 CSS3 动画问题答案

【问题标题】：CSS3 animation issue with z-indexz-index 的 CSS3 动画问题
【发布时间】：2011-11-24 00:17:06
【问题描述】：

this jsFiddle 中有两个元素。每个都在鼠标悬停时展开 :hover 过渡。

我希望蓝色动画与红色动画相匹配。现在红色的鼠标悬停在蓝色的上方展开，但蓝色的展开在红色的下方。我希望每个人都在之上制作动画。这可能可以通过更改 :hover 上的 z-index 来完成，但这似乎效果不佳。

【问题讨论】：

?? -- 对我来说，它正是你想要的..
你用的是什么浏览器？我知道在 IE 中 z-index 仅适用于定位元素，如果父级具有更高的 z-index。
我使用的是 chrome 13，但我也看到了 Firefox 6 中的故障。我希望动画一路顺畅。
这不是问题，是有人要求别人为他们做作业。抱歉，我对堆栈溢出规则非常宽容，但这个“问题”不属于这里根本。
您的 jsfiddle 已变为 404。您是否还有可能在某处保留它的副本？

【解决方案1】：

尝试将初始 z-index 值设置为 '0'

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

#a:hover, #b:hover {
    width: 600px;
    z-index: 1;
}

【讨论】：

【解决方案2】：

由于您正在为所有属性设置动画，因此 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/

【讨论】：

我喜欢你的解决方案，但是如果我想为z-index 以外的多个属性设置动画怎么办？我会用逗号分隔值吗？它似乎在这里不起作用：jsfiddle.net/hfM7E/1

【解决方案3】：

尝试将其添加到 CSS 中（并删除 #a:hover, #b:hover {...} 中的 z-index 修饰符）：

#a {
    background: #55a;
    left: 0;
    z-index: 1;
}

#b:hover {
    z-index: 2;   
}

示例：http://jsfiddle.net/h6ztv/3/

【讨论】：

jsfiddle 链接已损坏。