背景从白色过渡到黑色并返回答案

【问题标题】：Background that transitions from white to black and back背景从白色过渡到黑色并返回
【发布时间】：2015-01-06 08:45:44
【问题描述】：

我正在构建一个简单的网站，我希望在其中背景从 #FFFFFF 过渡到 #000000 并返回，无休止地重复。有点像这样：http://i393.photobucket.com/albums/pp12/Cyzzaro/Hi5New/fondo/black-to-white.gif。我还希望能够设置更改发生的速率。

我可以用 GIF 做到这一点，但有没有办法只用 HTML/CSS 做到这一点？

【问题讨论】：

标签： html css gif

【解决方案1】：

使用 CSS3 动画

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

或者简单地说：

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

P.S：您可能需要添加 @-webkit-keyframes pulsate 和其他 @-vendor- 特定前缀以获得更好的 xBrowser 支持

使用 jQuery UI：如果你愿意，你可以使用 jQuery 和它的 jQuery-UI 插件库：

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，因为默认 jQuery 的 .animate() 不支持 background-color 动画。

使用 CSS3 transition 和 jQuery：由于 CSS3 animate 是自己启动的，所以与 transition 的情况不同，触发事件或 transition 的更改状态，您可以使用 JS，在这种情况下，我使用 jQuery 来切换元素 className

jsBin demo

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

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

【讨论】：