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%
}

这会使它变暗，但我希望这种情况在平滑过渡/动画中逐渐发生。

您可以使用它。我不知道您的HTML是什么样子，但这里有一个小演示：

.back{
背景：rgba（0,0,0,95）；
显示：块；
高度：500px；
左：0；
不透明度：1；
位置：固定；
排名：0；
宽度：500px；
}
@关键帧返回更改{
来自{背景：rgba（133133.95）}
到{背景：rgba（0,0,0,95）}
}
.回来{
动画：后变4s线性；
}

---

这是一个过渡作业，而不是动画：

在这个例子中，当你将鼠标悬停在它上面时，我会将不透明度改为淡出

.TransitStyle {

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

-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
 transition-property: opacity;

-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
 transition-timing-function: linear;

-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.TransitStyle:hover {
 opacity: 0.0;
}

您只能使用简单的css和jQuery

addClass（）

方法来设置元素类属性

JS

CSS

---

谢谢，但我希望在页面加载时发生这种情况，之前Firefox和Chrome分别在三年和两年内不使用前缀支持hoverCSS3转换（IE直到IE10才支持它们，但它从未使用前缀；例如，

-ms transition property

）。Opera支持它的时间甚至更长。这里前缀的唯一用途是

-webkit-

供使用旧版本Safari的人使用。谢谢，这很容易集成

$( window ).load( function() {
    $( '.overlay' ).addClass( 'dark' );
});

.overlay {
    background-color: rgba(0,0,0,0);
    transition: background-color 1s ease;
}

.dark{
    background-color: rgba(0,0,0,.95);
}