css - 在 Firefox 上使用不透明度和 z-index 进行意外(不工作?)css3 转换

标签 css firefox css-transitions z-index opacity

<分区>

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

因此,我使用过渡将对象状态从不透明度 1 设置为不透明度 0 的动画,并在过渡结束时将 z-index 设置为 -1 以便能够对下面的内容进行操作(例如选择文本)。

这适用于 Chrome 但不适用于 Firefox,这是简单的 fiddle : 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;}

有没有人遇到过这个问题,知道吗?

最佳答案

Firefox 需要时间值的单位,甚至是零(0s,而不仅仅是 0)。根据 CSS Units and Values spec 是正确的因为所有尺寸(除了长度,出于历史原因)都需要指定单位,即使是零值也是如此。

关于css - 在 Firefox 上使用不透明度和 z-index 进行意外(不工作?)css3 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25948250/

上一篇:html - 如何将内容与 float div 内的菜单对齐

下一篇:javascript - 同位素 masonry 柱尺寸问题中的 fitRows

相关文章:

javascript - 如何在所有设备(即桌面和移动浏览器)上制作具有一定高度和 100% 宽度的 iframe

javascript - jQuery在Keypress事件上

c# - 是否可以在不关闭浏览器的情况下删除或使 gecko/firefox session 失效?

firefox - css - div 在 Firefox 上的错误位置

html - @Media 在 WordPress 中不起作用

html - Firefox 打印顶部对齐方式在第二页中效果不佳

javascript - 在添加特定于过渡的 css 属性之前所做的更改会触发过渡。为什么?

Javascript/CSS3 过渡

javascript - CSS3 动画 Buggy/Blinky

html - 是否可以将内容溢出到类似 iframe 的页面中?