Comment créer un fondu de transition css sur une image sprite ?

Question

J'utilise des liens d'images sprites pour certains de mes éléments de menu, en les positionnant avec background-position. J'aimerais créer un effet de fondu dans et hors du survol. J'ai mis en place un

Demo http://jsfiddle.net/6q2hH/

<li class="mobileimg"><a href="#" class="mobileimage" title="Go Mobile"></a></li>

    li.mobileimg .mobileimage{
     display:block;
     background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
     width: 30px;
     height:30px;
     margin-top:9px;
     margin-left:3px;
    }

    li.mobileimg .mobileimage:hover {background-position:0px -29px;}

Answer 1

Tout d'abord, vous devez définir l'opacité de l'élément .mobileimage:hover à quelque chose de moins de 1. Pour la compatibilité entre navigateurs, essayez :

.mobileimage:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5;
    opacity: .5;
}

Ensuite, pour créer un effet de transition réel, vous devez dire à .mobileimage pour créer une transition sur l'opacité au lieu de passer simplement à l'option opacity: .5 immédiatement :

.mobileimage {
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
    -moz-transition: opacity 500ms ease;   /* FF4+ */
    -ms-transition: opacity 500ms ease;    /* IE10? */
    -o-transition: opacity 500ms ease;     /* Opera 10.5+ */
    transition: opacity 500ms ease;     
}

500ms est le temps qu'il faut pour que l'opacité change, et ease est le type d'effet de transition. Voir le mise à jour du violon .

Answer 2

Quelque chose comme ça ? http://jsfiddle.net/6q2hH/3/

li.mobileimg .mobileimage{
 display:block;
 background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
 width: 30px;
 height:30px;
 margin-top:9px;
 margin-left:3px;
}

li.mobileimg .mobileimage:hover {
    background-position:0px -29px;
    -webkit-animation-name: fadingItOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fadingItOut {
    0% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.0;
    }
}
}

Vous pouvez modifier le comportement en fonction de vos besoins. Vérifiez Mozilla MDN pour plus d'informations.

N'oubliez pas non plus qu'il s'agit uniquement d'un exemple WebKit pour Safari/Chrome/Chromium/etc. Les autres préfixes sont (toutes les balises d'animation ont besoin d'un préfixe, ceci n'est qu'un exemple) ;

animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer

Et pour les cadres ;

@keyframes fadingItOut {
@-moz-keyframes fadingItOut {
@-o-keyframes fadingItOut {
@-ms-keyframes fadingItOut {