CSS：マウスアウトでの不透明度の切り替え？

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

これは、ホバーインしたときだけ不透明度をアニメーション化し、オブジェクトをマウスで離れたときはアニメーション化しないのはなぜですか？

デモはこちら：http : //jsfiddle.net/7uR8z/

​

遷移は:hover疑似クラスにのみ適用され、要素自体には適用されません。

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

デモ：http : //jsfiddle.net/7uR8z/6/

トランジションがmouse-overイベントに影響を与えたくない場合にのみmouse-out、:hover状態に対してトランジションをオフにできます。

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

デモ：http : //jsfiddle.net/7uR8z/3/

私はなんとか満足できるcss / jQueryを使用してソリューションを見つけることができました。元の問題：要素が領域の外にぶら下がっているので、アニメーション中に表示を強制的に表示する必要がありました。そうすることで、作成された大きなテキストブロックが、アニメーション中にもコンテンツ領域の外にぶら下がるようになりました。

解決策は、不透明度0でメインテキスト要素を開始し、不透明度1 addClassに注入して移行するために使用することです。次にremoveClass、もう一度クリックしたとき。

これを行うためのすべてのjQquery方法があると確信しています。私はそれをする人ではありません。:)

だから最も基本的な形で...

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

みんな助けてくれてありがとう。

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

フィドルを確認してください：http : //jsfiddle.net/2k3hfwo0/2/