Lassen Sie das Overlay langsam ausblenden?

Question

Ich bearbeite gerade einen subreddit auf reddit.com und meine Methoden sind auf beschränkt CSS nur. Ich habe einen Overlay-Effekt erhalten, wenn Sie den Mauszeiger über das Menü auf der linken Seite bewegen. Es verblasst, aber ich weiß nicht, wie ich es ausblenden soll. Da Übergang funktionierte nicht Ich versuchte eine andere Methode mit einer Animation.

TL; DR: Overlay einblenden: ja - fade out: nein :(

Hier sind einige Teile des Codes I verwendet:

#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);}} 

Vielleicht kann mir hier jemand helfen . diesen Effekt mit Übergängen

Answer 1

Sie sollten erreichen können und das wäre der richtige Weg sein würde ich persönlich empfehlen Heres eine schnelle Implementierung. https://jsfiddle.net/z1c8bvcd/1/

Die Hauptsache ist, dass Sie die CSS-Eigenschaften definieren müssen, zu denen das div zurückkehren wird, sobald der Hover-Zustand nicht mehr wirksam ist, und nicht nur, wie sie beim Überlappen aussehen: andernfalls wird das Pseudo-Element entfernt das 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; 
} 

Ich glaube, Sie auch einen ähnlichen Effekt mit Keyframes erreichen können, aber ich denke, dass die Animation einmal laufen würde, wenn die Seite geladen wird und dann, wenn das div schwebt wird.