0

I'm trying to fade an object with css3.

So I use transition to animate the object state from opacity 1 to opacity 0 and set the z-index to -1 at the end of the transition to be able to act on the content bellow (select a text for instance).

That works on Chrome but not on Firefox, here is the simple 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;}

Has anyone ever encountered that problem, any idea?

antoni
  • 5,001
  • 1
  • 35
  • 44

1 Answers1

1

Firefox requires the units for the time values, even zero (0s, not just 0). It's correct according to the CSS Units and Values spec because all dimensions (except lengths, for historical reasons) need to have the units specified even for zero values.

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57