CSS z-index 的 CSS3 动画问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7535180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 animation issue with z-index
提问by Web_Designer
I have two elements in this jsFiddle. Each expands on mouseover with a :hovertransition.
我在这个 jsFiddle 中有两个元素。每个都在鼠标悬停时扩展并带有:hover过渡。
I want the blue animation to match the red one. Right now the red one expands over top of the blue one on mouseover, but the blue one expands underthe red one. I would like each to animate over top ofthe other. This could probably be done by changing the z-index on :hoverbut that didn't seem to work very well.
我希望蓝色动画与红色动画相匹配。现在红色的在鼠标悬停时扩展到蓝色的上方，但蓝色的扩展到红色的下方。我希望每个动画都在另一个之上。这可能可以通过更改 z-index 来完成，:hover但这似乎效果不佳。
回答by methodofaction
Since you are animating all properties, the z-index animates and steps from 0 to 1 at the end of the animation.
由于您正在对所有属性进行动画处理，因此 z-index 会在动画结束时进行动画处理并从 0 到 1 步进。
Just animate the properties that you need and it works:
只需为您需要的属性设置动画即可：
#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;
}
回答by Ravi Sharma
Try setting initial z-index value to '0'
尝试将初始 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;
}回答by Shaz
Try adding this to the CSS (and remove the z-indexmodifier in #a:hover, #b:hover {...}):
尝试将其添加到 CSS（并删除 中的z-index修饰符#a:hover, #b:hover {...}）：
#a {
background: #55a;
left: 0;
z-index: 1;
}
#b:hover {
z-index: 2;
}
Example: http://jsfiddle.net/h6ztv/3/
