Why does this CSS hover transition fail in FireFox?

Question

I've posted a simple example here: http://jsfiddle.net/tkJgg/

I know FF needs to have initial values set for the transition properties. I think I have that though. Any ideas what's wrong?

Answer 1

use this

-moz-transition: all 0.5s ease-in-out;

DEMO

Answer 2

remove the 0 at the end :

 -moz-transition: all 0.5s ease;

or specify the s(seconds) after zero :

-moz-transition: all 0.5s ease 0s;

The syntax say :

 <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where <time> is defined here :

time

The CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a <number> immediately followed by the unit.

and moreover :

"While unitless zero is allowed for <length>, it's invalid for all other units."

Answer 3

The hover transition doesn't fails in Mozilla but sometimes because of code errors or fail loading the browser disables this property. To ignore this problem you should define the browser in the CSS transition. The following is the example that which code should be used in defining different main browsers

#mydiv a:hover{
   -moz-transition:all 0.5s ease-in-out;     /*For Mozilla Browser*/ 
   -webkit-transition:all 0.5s ease-in-out;  /*For Chrome and Safari*/
   -o-transition:all 0.5s ease-in-out;       /*For Opera Browser*/
    transition:all 0.5s ease-in-out;         /*For Other Browser*/
}