javascript - 背景图像的CSS动画过渡变暗

因此，我正在构建一个具有背景图像的页面:

body {
    background:url(images/bg.png) center center no-repeat fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}

该页面加载了一个看起来像警报/消息的div。当此div加载后，我希望背景图像的简短动画变得更暗，
现在我用这个:

back {
    background:rgba(0,0,0,.95);
    display:block;
    height:100%;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:100%
}

这使它变暗，但是我希望这能在平滑的过渡/动画中逐渐发生。

最佳答案

您可以为此使用@keyframes。我不知道您的HTML是什么样的，但这是一个小演示:

.back {
    background:rgba(0,0,0,.95);
    display:block;
    height:500px;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:500px;
}

@keyframes back-change {
   from { background: rgba(133,133,133,.95) }
     to { background: rgba(0,0,0,.95) }
}

.back {
  animation: back-change 4s linear;
}

<div class="back"></div>

我将其设置为以线性模式在4秒内从亮变为暗。您可以更改持续时间或将模式更改为所需的任何值(无，无限等)。

请注意，后面必须在back-change属性中调用的是@keyframes单词后面的名称animation。如果在一个位置更改名称，则必须在两个位置都更改名称。

这也是JSFiddle Example，您也可以自己弄乱。

您也可以使用CSS3 Transitions。 Web浏览器已经支持了这些功能。

.back {
    background:rgba(0,0,0,.95);
    display:block;
    height:500px;
    left:0;
    opacity:1;
    position:fixed;
    top:0;
    width:500px;
    transition-property: background-color;
    transition-duration: 0.3s;
}

.back:hover {
    background-color: rgba(133,133,133,.95);
}

<div class="back"></div>

同样，这是一个JSFiddle Example供您使用。