Comment faire de l'effet de transition sur sprite css hover

Ici une partie de mon sprite css 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>

Maintenant, quand cette icône planait je veux avoir un effet de transition. Comment puis-je le faire ?

J'ai essayé ici, mais pas de chance

CSS de Fondu Entre les Images d'arrière-plan sur le vol Stationnaire

quel est votre but final sur l'animation? voulez-vous le fondu d'entrée ou de déplacer vers le haut? maintenant, quand vous ajoutez un effet de transition en css3 je peux voir, il va glisser l'icône à l'état actif.

OriginalL'auteur MonsterMMORPG | 2013-08-02

  1. 8

    Fondu De L'Image En Une Autre:

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

    Démo: http://jsfiddle.net/hxJyw/2/

    génial merci beaucoup
    combien de fois est l'arrière-plan chargé lorsque vous faites de cette façon?

    OriginalL'auteur Arbaoui Mehdi

  2. 1

    1) Vous n'avez pas appliqué à tout transition effects dans votre CSS.

    2) Pas besoin d'ajouter des effets de transition en :hover effet.

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

    Vérifier dans jSFiddle

    Espère que c'est ce que vous essayez.

    merci cela fonctionne également. mon but ultime est fondu bien 😀

    OriginalL'auteur Praveen