CSS动画过渡暗

Question

所以我建立一个网页，有一个背景图片：

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

这使得它更暗，但我想这是一个平稳过渡/动画逐渐发生。

Answer 1

您可以使用@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>

我将它设置为从光在4S以线性模式改变黑暗。您可以更改持续时间或将模式更改为任何您想要的（无，无限等）。

请注意，在@keyframes之后的名称back-change是您稍后必须在animation属性中调用的名称。如果您在一个地点更改名称，则必须在两个地方进行更改。

这里是一个JSFiddle Example以及自己搞乱。

---

您也可以使用CSS3 Transitions。这些在网页浏览器中已经得到了更长时间的支持。

.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你一起玩。

Answer 2

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

在这个例子中，我会改变的不透明度淡出当你在它悬停......

.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; 
} 

Answer 3

您可以使用简单的css transition和jQuery addClass()方法只设置元素类属性。

JS

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

CSS

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

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

FIDDLE