css - Firefox transition is not working. Is this a bug? -

css - Firefox transition is not working. Is this a bug? -

i have simple image swap transition works on chrome. code:

<a class="twitter" href="index.php"></a> .twitter { width:26px; height:26px; display:block; background:transparent url('../images/twitter.jpg') center top no-repeat; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -o-transition: 0.3s linear; transition: 0.3s linear; } .twitter:hover {background-image: url('../images/twitter-hover.jpg');}

demo: http://jsfiddle.net/gwkeq/17/

it's because chrome supports animating background-image css property - wrong according the spec, it's noted as:

background-image

animatable: no

for more info on can animate (also in browsers etc.), check out this page. in future, other browsers allow animating background-image property (and spec change), since programmers/designers want.

css firefox transitions