Làm thế nào để làm cho hiệu ứng chuyển trên css sprite di chuột

Question

Dưới đây là một phần của css đang sprite tôi

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

Bây giờ khi biểu tượng này dao động tôi muốn có hiệu ứng chuyển. Làm thế nào tôi có thể làm điều đó ?

tôi đã cố gắng ở đây nhưng không có may mắn

CSS Fade Between Background Images on Hover

Answer 1

Fade ảnh Into Một:

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) Bạn chưa áp dụng bất kỳ transition effects trong CSS của bạn.

2) Không cần thêm hiệu ứng chuyển tiếp trong các hiệu ứng :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; 
} 

Kiểm tra này trong jSFiddle

Hope đây là những gì bạn đang cố gắng.