CODEWITHSUNDEEP
csswebkittransition
thomasp423
thomasp423

Reputation: 367

Background color fade out with no hover

I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?

Upvotes: 2

Views: 9036

Answers (3)

Idris
Idris

Reputation: 1005

Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color

CSS

body {
    background: #009dff;
}

Then set the background color that the page fades into, and add the transition

JS

$(document).ready(function() {
   $("body").css("transition", "3s"); // Adding transition
   $("body").css("background", "#fff"); //Background color to fade into 
});

Plus here's a demo.

With pure JS you can use onload on the body and set up a function, then call it that way.

Upvotes: 4

aph
aph

Reputation: 394

This can be done using CSS animations. There is a property animation-delay which can be set in seconds.

animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;

Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/

Upvotes: 5

mickzer
mickzer

Reputation: 6348

If you had an element eg: .elem

<div class="elem"></div>

Styles: 

.elem {
  width: 100px;
  height: 100px;
  background: red;
 }

You could have a css class eh .nobackground that set the background to transparent with a transition.

.nobackground {
  background: transparent !important;
  transition: all 1s;
}

You could then apply this class to the element on page load with jquery.

$(document).ready(function(){

   $(".elem").addClass("nobackground");

});

Heres a bin. Hope this helps.

Upvotes: 0

Related Questions