Question

Possible Duplicate:
CSS keyframes only works in Chrome

My site uses css transitions to fade in new images on the three icons (facebook, twitter, email). The transitions work well on Chrome, but not in Firefox. Here’s the css snipper:

.link-button > div{height:79px; width:79px; display:inline-block; zoom: 1; *display:inline; 
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

.link-button .facebook{background:url(../img/bt_facebook.png) center center no-repeat transparent;}
.link-button .facebook:hover{background-image:url(../img/bt_facebook_over.png);}
.link-button .twitter{background:url(../img/bt_twitter.png) center center no-repeat transparent;}
.link-button .twitter:hover{background-image:url(../img/bt_twitter_over.png);}
.link-button .email{background:url(../img/bt_email.png) center center no-repeat transparent;}
.link-button .email:hover{background-image:url(../img/bt_email_over.png);}

I’m assuming that my error is directly with the -moz-transition because the :hover state works, but not the transition. I’ve copied the transition code from w3 school, so I know it’s not incorrect, but my Firefox correctly fires the css transitions found on the internet, so I know it’s not my browser being faulty. It must be something fundamental I’ve overlooked.

Any ideas?

Answer 1

The CSS3 specification says background-image cannot be animated. The background-image transition in Chrome is nonstandard.