Trouble with css3 transitions

I am trying to make my nav icon fade in, but no matter what transition I try its just instant. Am I missing something?

Works for me in Chrome. What browser are you testing this in?

Firefox…your right, its fine in Chrome, but firefox and safari are no go. I put them all like this though…

-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-o-transition: all 2s linear;

also, after the ease in, is there a way to make it stick for current page without needing to declare it all again for that state?

Seems Firefox can’t handle this yet, as other discussions seem to indicate:

Hmmm…that stinks. I really gotta learn jquery…lol. Thanks ralph.


You can do it for Firefox if you use opacity to fade the image in instead.

Here’s an example but does need that specific structure to work.