DIV背景色的过渡不起作用

Question

我有以下CSS用于覆盖层：当显示侧边栏时显示的覆盖层。我希望通过过渡在较慢的时间内应用背景，但是它不起作用。有什么建议吗？

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background 0.2s ease, padding 0.8s linear;
    background: linear-gradient(to right, rgba(192,192,192,0),rgba(192,192,192,1));
    transition: 1s;
    z-index: 1;
    cursor: pointer;
}

<div id="overlay"></div>

Answer 1

您无法转换display。使用opacity和visibility进行伪造。

http://jsfiddle.net/3zqorjt5/13/

Answer 2

这是正确的代码。您必须使用动画来完成。

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(192,192,192,0),rgba(192,192,192,1));
    -webkit-animation: smooth 1s ease-in;
    -moz-animation: smooth 1s ease-in;
    -o-animation: smooth 1s ease-in;
    -ms-animation: smooth 1s ease-in;
    animation: smooth 1s ease-in;
    z-index: 1;
    cursor: pointer;
}
@-webkit-keyframes smooth {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

@-moz-keyframes smooth {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

@-o-keyframes smooth {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

@keyframes smooth {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

<div id="overlay"></div>