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

这会使它变得更暗，但我希望这个过程可以逐渐平滑地过渡/动画化。

- Batou069

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>

我将其设置为在4秒内以线性模式从浅色变为深色。您可以更改持续时间或更改模式为任何您想要的（无，无限等）。

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

这里还有一个JSFiddle示例，供您自己尝试。

---

你也可以使用 CSS3过渡效果。它们在网络浏览器中的支持时间更长。

.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示例，供您使用。

- TylerH

Answer 2

你可以使用简单的CSS 转换效果和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);
}

The English text translates to:

FIDDLE

This text is related to programming and contains HTML.

- Danijel

---

谢谢，这很容易集成。 - Batou069

Answer 3

这是一个转换的工作，而不是动画：

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

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

- user4723924

---

谢谢，但我希望这在页面加载时发生，而不是像悬停这样的先前事件。 - Batou069

CSS3过渡效果在Firefox和Chrome中已经分别支持三年和两年，无需前缀（IE直到IE10才开始支持它们，但从未使用过前缀；例如不存在“-ms-transition-property”）。Opera甚至更早就支持了无前缀的过渡效果。这里唯一需要前缀的是对于使用旧版Safari的人来说需要使用“-webkit-”。 - TylerH