在Firefox上使用不透明度和z-index的意外（不工作？）css3转换

Question

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

因此，我使用transition将对象状态从不透明度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;}

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

Answer 1

Firefox需要时间值的单位，甚至为零（0s，而不仅仅是0）。根据{{​​3}}它是正确的，因为所有维度（长度除外，由于历史原因）需要指定单位，即使是零值。