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 badges3 Answers
Reset to default 6You 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;
}