CODEWITHSUNDEEP
cssfirefoxtransition
devotchkah
devotchkah

Reputation: 277

Firefox transition is not working. Is this a bug?

I have a simple image swap transition that only works on chrome. the 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: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    }

.twitter:hover {background-image: url('../images/twitter-hover.jpg');}

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

Upvotes: 0

Views: 261

Answers (1)

MarcoK
MarcoK

Reputation: 6110

It's because only Chrome actually supports animating the background-image CSS property - which is actually incorrect according to the spec, where it's noted as:

background-image

Animatable: no

For more info on what you can animate (also in which browsers etc.), check out this page. In the future, other browsers will hopefully allow animating the background-image property (and the spec will change), since this is something programmers/designers actually want.

Upvotes: 1

Related Questions