Wie Übergang Effekt auf die CSS-Sprites schweben

Question

Hier ist ein Teil meines CSS Sprites Code

 #IconSet a { 
     width: 36px; 
     height: 36px; 
     display: inline-block; 
    } 

    #DeviantArtIcon { 
     border-width: 0px; 
     border-style: none; 
     background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png); 
     background-color: transparent; 
     background-repeat: repeat-x; 
     background-position: -144px -0px; 
     width: 36px; 
     height: 36px; 
    } 

    #DeviantArtIcon:hover { 
     border-width: 0px; 
     border-style: none; 
     background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png); 
     background-color: transparent; 
     background-repeat: repeat-x; 
     background-position: -144px -36px; 
     width: 36px; 
     height: 36px; 
    } 

<a id="DeviantArtIcon" href="http://monstermmorpg.deviantart.com" rel="nofollow" target="_blank" title="Monster MMORPG On Deviant Art - Please Watch Our Channel"></a> 

Jetzt machen, wenn dieses Symbol schwebte ich will Übergangseffekt haben. Wie kann ich das machen ?

Ich habe versucht, hier aber kein Glück

CSS Fade Between Background Images on Hover

Answer 1

Fade Bild in ein anderes:

HTML:

<a id="deviant-art-icon" href="http://monstermmorpg.deviantart.com"><span></span></a> 

CSS:

#deviant-art-icon { 
    background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat; 
    display: inline-block; 
    position: relative; 
    text-indent: -9999px; 
    width: 36px; 
    height: 36px; 
    background-position: -144px -0px; 
} 

#deviant-art-icon span { 
    position: absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat; 
    background-position: -144px -36px; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -o-transition:  opacity 0.5s; 
} 

#deviant-art-icon:hover span { 
    opacity: 1; 
} 

Demo: http://jsfiddle.net/hxJyw/2/

Answer 2

1) Sie haben keine transition effects in Ihrem CSS nicht angewendet.

2) Kein Übergangseffekte in :hover Wirkung hinzufügen.

#DeviantArtIcon { 
-o-transition:2s ease-out, background 2s ease-in; 
-ms-transition:2s ease-out, background 2s ease-in; 
-moz-transition:2s ease-out, background 2s ease-in; 
-webkit-transition:2s ease-out, background 2s ease-in;   
transition:2s ease-out, background 2s ease-in; 
} 

prüfen diese in jSFiddle

Hoffnung ist das, was Sie versuchen.