CSS遷移やすアウトは

Question

は[OK]を働いていないので、これが出て楽にしない理由を私は理解していない：（クイックビューのために、ちょうどhttp://htmledit.squarefree.comに貼り付け、例えば）

<style> 
#over { 
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg); 
height:150px; 
width:150px; 
} 

#in { 
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
height:150px; 
width:150px; 
} 

#in:hover { 
opacity: 0; 
transition: opacity .3s ease-in-out; 
} 

</style> 

<div id="over"> 
<div id="in"></div 
</div> 

Answer 1

私はあなたが求めていることを正確には分かっていませんが、あなたはマウスオーバー時にのみ遷移が起こっていると言っていると思います。（それは以前のように移行）。遷移プロパティを#in:hoverではなく#inに追加する必要があります。この移行は、#in要素が上に乗っているときにのみ発生します。遷移のCSSを#inの下に移動すると、マウスオーバーとマウスアウトで動作します。ホバー状態の希望のCSSを#in:hoverの下に残したいとします。この場合、不透明度の変更は行いますが、実際のトランジションCSSプロパティは#inになります。

それはもう少し明確にする：知っている

#in { 
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
    height:150px; 
    width:150px; 
    transition: opacity .3s ease-in-out; /* add this here */ 
} 

#in:hover { 
    opacity:0; 
    /* and we've removed it from here */ 
} 

事が容易・イン・アウトは、それが移行する時期とは何の関係もないということです。そのように見えるかもしれません、イージー・インはホバリング、イーズ・アウトはマウス・アウトですが、実際には、イージー・イン・アウトとは、イージー・インゆっくりと遷移に移行し、最後に向かってスピードアップします。それは、起こる時ではなく、移行そのもののスタイルに関係しています。

あなたはすでにそれを理解していたかもしれませんが、あなたの質問に基づいて、あなたはそこで混乱していたようです。

Answer 2

私は@welbornioの答えが私のために働いていましたが、イージーインアウトは最初は完全には機能しませんでした。 'img'に適用すると、イージーエフェクトは断続的にしか機能しませんでした。効果が毎回働くためには、「イーグ」にイージー・インを、「ホバー」にイージー・アウトを適用する必要があることがわかりました。なぜこれが起きているのか分かりませんが、誰かが同じ問題に遭遇した場合の解決策です。