最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CSS animate transition of background image getting darker - Stack Overflow

programmeradmin2浏览0评论

So I'm building a page that has a background image:

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
}

The page loads with a div that looks like a alert/message. When this div loads I want a short animation of the background-image getting darker,
Right now I use this:

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

This makes it darker, but I want this to happen gradually in a smooth transition/animation.

So I'm building a page that has a background image:

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
}

The page loads with a div that looks like a alert/message. When this div loads I want a short animation of the background-image getting darker,
Right now I use this:

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

This makes it darker, but I want this to happen gradually in a smooth transition/animation.

Share Improve this question edited Apr 4, 2015 at 1:41 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked Apr 4, 2015 at 1:26 Batou069Batou069 451 silver badge3 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

You can use @keyframes for this. I don't know what your HTML looks like, but here's a little demo:

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

I set it to change from light to dark over 4s in a linear pattern. You can change the duration or change the pattern to whatever you want (none, infinite, etc.).

Notice that the name back-change that follows the @keyframes word is what you'll have to call in the the animation property later on. If you change the name in one spot, you'll have to change it in both.

Here's a JSFiddle Example as well for messing around with on your own.


You can also use CSS3 Transitions as well. These have been supported a little longer in web browsers.

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

Again, here's a JSFiddle Example for you to play with.

You can use simple css transition and jQuery addClass() method only to set element class attribute.

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

This is a job for a transition, not an animation:

In this example I'll change the opacity to fade out when you hover over it...

.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;
}
发布评论

评论列表(0)

  1. 暂无评论