CSS: krycie przejścia po wyjechaniu myszą?

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

Dlaczego to animuje krycie tylko wtedy, gdy najeżdżam kursorem, a nie wtedy, gdy zostawiam obiekt myszą?

Demo tutaj: http://jsfiddle.net/7uR8z/

Wcześniejsze

Stosujesz przejścia tylko do :hoverpseudoklasy, a nie do samego elementu.

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

Demo: http://jsfiddle.net/7uR8z/6/

Jeśli nie chcesz, aby przejście miało wpływ na mouse-overzdarzenie, a jedynie mouse-out, możesz wyłączyć przejścia dla :hoverstanu:

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

Demo: http://jsfiddle.net/7uR8z/3/

Udało mi się znaleźć rozwiązanie za pomocą css / jQuery, z którym czuję się komfortowo. Oryginalny problem: musiałem wymusić wyświetlanie widoczności podczas animacji, ponieważ mam elementy wiszące poza tym obszarem. W ten sposób duże bloki tekstu będą teraz wisieć poza obszarem zawartości również podczas animacji.

Rozwiązaniem było rozpoczęcie głównych elementów tekstu z kryciem 0 i użycie ich addClassdo wstrzyknięcia i przejścia do krycia o wartości 1. Następnie removeClasspo ponownym kliknięciu.

Jestem pewien, że można to zrobić w całości w jQquery. Po prostu nie jestem facetem, który to robi. :)

Więc w najbardziej podstawowej formie ...

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

Dzięki za pomoc wszystkim.

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

Sprawdź skrzypce: http://jsfiddle.net/2k3hfwo0/2/