Jak zrobić efekt przejścia na css ikonki najechaniu

Question

Tu część mojego kodu css ikonki

 #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> 

Teraz kiedy ta ikona unosiła chcę mieć efekt przejścia. Jak mogę to zrobić ?

próbowałem tutaj, ale bez powodzenia

CSS Fade Between Background Images on Hover

Answer 1

Fade obrazu na inny:

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) Nie zastosowano żadnych transition effects w CSS.

2) Nie trzeba dodawać efektów przejścia w celu uzyskania efektu :hover.

#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; 
} 

sprawdzić w jSFiddle

nadzieję, że to, co starasz.