CSS：マウスオーバー時のトランジション不透明？

Question

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

Answer 1

あなたが要素自体にのみ: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/

Answer 2

私はこれをFIREFOX untでこれと戦っていました。私はあなたが単語の不透明度にタイプミス持って実現IL：

-moz-transition: opacity .15s ease-in-out; 

Answer 3

する

-moz-transition: opactiy .15s ease-in-out; 

ニーズは、私は私が快適だCSS/jQueryのを使用して解決策を見つけることができました。元の問題：私は要素がエリア外にぶら下がっているので、アニメーション化中に可視性を強制的に表示しなければなりませんでした。そうすることで、アニメーション中に大きなテキストブロックがコンテンツエリアの外にぶら下がってしまうようになりました。

不透明度が0のメインテキスト要素を開始し、addClassを使用して、不透明度1に注入して移行します。次にremoveClassを再度クリックします。

これを行うにはすべてのjQquery方法があります。私はそれをする人ではない。 :)

は、だからで最も基本的な形...ヘルプ皆のため

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

おかげです。

Answer 4

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

チェックフィドル：私はサファリを使用して、私はマウスでオブジェクトを離れた場合でも、それは完璧に動作http://jsfiddle.net/2k3hfwo0/2/