<分区>
<分区>
我正在尝试使用 css3 淡入淡出一个对象。
因此,我使用过渡将对象状态从不透明度 1 设置为不透明度 0 的动画,并在过渡结束时将 z-index 设置为 -1 以便能够对下面的内容进行操作(例如选择文本)。
这适用于 Chrome 但不适用于 Firefox,这是简单的 fiddle : http://jsfiddle.net/8qtg5wuj/5/
.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/
相关文章:
javascript - 如何在所有设备(即桌面和移动浏览器)上制作具有一定高度和 100% 宽度的 iframe
javascript - jQuery在Keypress事件上
c# - 是否可以在不关闭浏览器的情况下删除或使 gecko/firefox session 失效?
firefox - css - div 在 Firefox 上的错误位置
html - @Media 在 WordPress 中不起作用
html - Firefox 打印顶部对齐方式在第二页中效果不佳
javascript - 在添加特定于过渡的 css 属性之前所做的更改会触发过渡。为什么?