CODEWITHSUNDEEP
htmlcssgif
Traviskorte
Traviskorte

Reputation: 113

Background that transitions from white to black and back

I'm building a simple site in which I want the background to transition from #FFFFFF to #000000 and back, repeating endlessly. Kind of like this: http://i393.photobucket.com/albums/pp12/Cyzzaro/Hi5New/fondo/black-to-white.gif. I'd also like to be able to set the rate at which the change happens.

I can do this with a GIF, but is there a way to do it with just HTML/CSS?

Upvotes: 1

Views: 2477

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

Using CSS3 animation

jsBin demo

body{
  background:#000;
  animation: pulsate 2s ease-in-out infinite;
}

@keyframes pulsate { /* You can add more % with more colors! */
  0% {background-color: black;}
  50% {background-color: white;}
  100% {background-color: black;}
}

or simply as:

@keyframes pulsate {
  50% {background-color: white;}
}

P.S: you might want to add @-webkit-keyframes pulsate and other @-vendor- specific prefixes for a better xBrowser support

Using jQuery UI: if you want you can do it using jQuery and it's jQuery-UI addon library:

jsBin demo

var clr = ["#000", "#ddd", "red"], // You can add more colors!
    bgN = clr.length,
    bgC = 0 ;

(function loop(){
  $('body').animate({backgroundColor: clr[bgC++ % bgN]}, 1000, loop);
}());

P.S: jQuery UI is needed cause the default jQuery's .animate() does not support background-color animations.

Using CSS3 transition and jQuery: since CSS3 animate starts on it's own, it's not the same case with transition, to trigger an event or change-state for transition you can use JS, in this case I've used jQuery to toggle the element className

jsBin demo

body{
  background:#000;
  transition: 2s;
}
.white{
  background:#fff;
}

<!
setInterval(function(){
  $("body").toggleClass("white");
},2000);

Upvotes: 4

Related Questions