オーバーレイを徐々にフェードアウトさせますか？

Question

私は現在reddit.comのサブディレクトリを編集中です。私の方法はのCSSのみであるに制限されています。 左側のメニューにカーソルを合わせると、オーバーレイ効果が得られました。フェードインしていますが、フェードアウトする方法はわかりません。 のトランジションが動作していなかったので私はアニメーションで別のメソッドを試しました。

TL; DR：中オーバーレイフェード：はい - フェードアウト：ここでは何:(

は、私が使用したコードの一部ではない：

は

#sr-header-area .drop-choices:hover:before { 
    content: ""; 
    font-size: 13px; 
    display: block; 
    position: fixed !important; 
    height: 100%; 
    width: 100%; 
    margin-left: 300px; 
    pointer-events: none; 
    z-index: 700 !important; 
    animation: fade 0.5s ease; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;} 

@keyframes fade { 
    0% {background-color: rgba(0, 0, 0, 0);} 
    100% {background-color: rgba(0, 0, 0, 0.4);}} 

たぶん誰かが私をここに助けることができます。

Answer 1

移行でこの効果を得ることができるはずです。それは私が個人的に推奨する方法です。https://jsfiddle.net/z1c8bvcd/1/

覚えておくべき重要なことは、ホバー状態がもはや有効でなくなったときにdivが返すCSSプロパティを定義する必要があることです。それ以外の場合は：before擬似要素が削除されますDOM。

#foo:before { 
    content: ""; 
    background: rgba(255, 255, 255, 0); 
    transition: background 0.5s, margin-left 0.5s; 
    width: 100%; 
    height: 100%; 
    position: fixed!important; 
    margin-left: 50px; 
} 

#foo:hover:before { 
    background: rgba(0, 0, 0, 0.3); 
    margin-left: 300px; 
} 

私はあなたにもキーフレームを使用して同様の効果を得ることができると思いますが、私はdiv要素が推移するたびにアニメーションが一度、ページのロード時に、次に実行と思います。