CSS: ¿opacidad de transición al sacar el mouse?

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

¿Por qué esto solo anima la opacidad cuando me desplazo pero no cuando dejo el objeto con el mouse?

Demostración aquí: http://jsfiddle.net/7uR8z/

​

Está aplicando transiciones solo a la :hoverpseudoclase, y no al elemento en sí.

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

Demostración: http://jsfiddle.net/7uR8z/6/

Si no desea que la transición afecte al mouse-overevento, pero solo mouse-out, puede desactivar las transiciones para el :hoverestado:

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

Demostración: http://jsfiddle.net/7uR8z/3/

Me las arreglé para encontrar una solución usando css / jQuery con la que me siento cómodo. El problema original: tuve que forzar que se mostrara la visibilidad mientras animaba ya que tengo elementos colgando fuera del área. Al hacerlo, los grandes bloques de texto ahora también cuelgan fuera del área de contenido durante la animación.

La solución fue comenzar los elementos de texto principales con una opacidad de 0 y usarlos addClasspara inyectar y hacer la transición a una opacidad de 1. Luego, removeClasscuando se hace clic en ellos nuevamente.

Estoy seguro de que hay una forma totalmente jQquery de hacer esto. Simplemente no soy el tipo para hacerlo. :)

Entonces, en su forma más básica ...

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

Gracias a todos por la ayuda.

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

Compruebe el violín: http://jsfiddle.net/2k3hfwo0/2/