使覆盖缓慢淡出？

Question

我目前正在编辑reddit.com上的subreddit，并且我的方法受限于仅限于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悬停动画将运行一次。