CSS: opasitas transisi saat mouse-out?

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

Mengapa ini hanya menganimasikan opasitas saat saya mengarahkan kursor, tetapi tidak saat saya meninggalkan objek dengan mouse?

Demo di sini: http://jsfiddle.net/7uR8z/

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Anda menerapkan transisi hanya ke :hoverpseudo-class, dan bukan ke elemen itu sendiri.

.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/

Jika Anda tidak ingin transisi memengaruhi mouse-overacara, tetapi hanya mouse-out, Anda dapat menonaktifkan transisi untuk :hoverstatus:

.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/

Saya berhasil menemukan solusi menggunakan css / jQuery yang saya sukai. Masalah asli: Saya harus memaksa visibilitas untuk ditampilkan saat menganimasikan karena saya memiliki elemen yang tergantung di luar area. Melakukannya, membuat blok teks besar sekarang menggantung di luar area konten selama animasi juga.

Solusinya adalah memulai elemen teks utama dengan opacity 0 dan gunakan addClassuntuk memasukkan dan transisi ke opacity 1. Kemudian removeClasssaat diklik lagi.

Saya yakin ada cara jQquery untuk melakukan ini. Aku bukan orang yang melakukannya. :)

Jadi dalam bentuk paling dasar ...

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

Terima kasih atas bantuan semuanya.

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

Periksa biola: http://jsfiddle.net/2k3hfwo0/2/