CSS: opacité de transition lors du passage de la souris?

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

Pourquoi cela n'anime-t-il l'opacité que lorsque je survole, mais pas lorsque je quitte l'objet avec la souris?

Démo ici: http://jsfiddle.net/7uR8z/

​

Vous appliquez des transitions uniquement à la :hoverpseudo-classe et non à l'élément lui-même.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Démo: http://jsfiddle.net/7uR8z/6/

Si vous ne souhaitez pas que la transition affecte l' mouse-overévénement, mais uniquement mouse-out, vous pouvez désactiver les transitions pour l' :hoverétat:

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Démo: http://jsfiddle.net/7uR8z/3/

J'ai réussi à trouver une solution en utilisant css / jQuery avec laquelle je suis à l'aise. Le problème d'origine: j'ai dû forcer l'affichage de la visibilité pendant l'animation car j'ai des éléments suspendus à l'extérieur de la zone. Ce faisant, de gros blocs de texte sont désormais suspendus à l'extérieur de la zone de contenu pendant l'animation.

La solution était de démarrer les éléments de texte principaux avec une opacité de 0 et de les utiliser addClasspour injecter et passer à une opacité de 1. Puis, removeClasslorsque vous cliquez à nouveau sur.

Je suis sûr qu'il existe un moyen entièrement jQquery de le faire. Je ne suis pas du genre à le faire. :)

Donc, dans sa forme la plus élémentaire ...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Merci à tous pour l'aide.

$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Vérifiez le violon: http://jsfiddle.net/2k3hfwo0/2/