Firefox上具有不透明度和z-index的意外（不工作？）css3过渡[重复]

Posted 2023-03-06

【中文标题】Firefox上具有不透明度和z-index的意外（不工作？）css3过渡[重复]

【英文标题】：Unexpected (not working?) css3 transition with opacity and z-index on Firefox [duplicate]

【发布时间】：2014-11-14 21:28:03

【问题描述】：

我正在尝试使用 css3 淡化一个对象。

所以我使用过渡来将对象状态从不透明度 1 设置为不透明度 0，并在过渡结束时将 z-index 设置为 -1，以便能够作用于下面的内容（例如，选择一个文本）。

这适用于 Chrome 但不适用于 Firefox，这是简单的小提琴： http://jsfiddle.net/8qtg5wuj/5/

CSS：

.wrapper border:2px solid #f00;width:200px;height:200px;position:relative;

.inner:before
content:'';
background:#ccc;
width:105%;
height:105%;
position:absolute;
top:-2.5%;
left:-2.5%;
z-index:1;
opacity:1;
transition:z-index 0, opacity 1.2s;

.wrapper:hover .inner:before
transition:z-index 0 1.2s, opacity 1.2s;
opacity:0;
z-index:-1;

有没有人遇到过这个问题，有什么想法吗？

【参考方案1】：

Firefox 需要时间值的单位，甚至为零（0s，而不仅仅是0）。根据CSS Units and Values spec，这是正确的，因为所有尺寸（由于历史原因，长度除外）都需要指定单位，即使是零值。

【讨论】：

太棒了，速度快，效率高。我怎么能错过！