Background-Image Transition Not Working On Firefox - css

Question

I am trying to create a logo transition with css however it only works in Chrome and not FF or even IE so what should i do ?
MY CSS
.logo {
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-image: url(../images/text.enter.png);
border-style: none;
height: 70px;
left: 50%;
margin-left: -138.5px;
margin-top: -35px;
position: absolute;
top: 50%;
width: 277px;
}
.logo:hover { background-image: url(../images/logo.png); }

Answer 1

Demo : http://jsfiddle.net/lotusgodkk/GCu2D/242/
CSS:
* {
margin: 0;
padding: 0;
}
#nav li:hover {
-webkit-animation: NAME-YOUR-ANIMATION 500ms;
/* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 500ms;
/* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 500ms;
/* Opera 12+ */
animation: NAME-YOUR-ANIMATION 500ms;
/* IE 10+, Fx 29+ */
}
#nav {
width: 400px;
margin: 40px auto;
}
#nav li {
list-style-type:none;
font-size:2em;
}
#nav li a {
background-image:url('http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif');
background-repeat:no-repeat;
padding: 0 0 0 90px;
display: block;
height: 72px;
}
#nav li a.item1 {
background-position:0px 0px;
}
#nav li a:hover.item1 {
background-position:0px -72px;
}
#nav li a.item2 {
background-position:0px -143px;
}
#nav li a:hover.item2 {
background-position:0px -215px;
}
#nav li a.item3 {
background-position:0px -287px;
}
#nav li a:hover.item3 {
background-position:0px -359px;
}
#nav li a.item4 {
background-position:0px -431px;
}
#nav li a:hover.item4 {
background-position:0px -503px;
}
#nav li a.item5 {
background-position:0px -575px;
}
#nav li a:hover.item5 {
background-position:0px -647px;
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
HTML:
<ul id="nav">
<li><a class="item1" href="#" title="Some Link 1">Item 1</a>
</li>
<li><a class="item2" href="#" title="Some Link 2">Item 2</a>
</li>
<li><a class="item3" href="#" title="Some Link 3">Item 3</a>
</li>
<li><a class="item4" href="#" title="Some Link 4">Item 4</a>
</li>
<li><a class="item5" href="#" title="Some Link 5">Item 5</a>
</li>
</ul>
I used keyframes for animation. You can learn more about it here: http://css-tricks.com/snippets/css/keyframe-animation-syntax/
The example may not be perfect as per your needs but it can surely help you to achieve what you want.