javascript css3 每 2 秒更改一次背景颜色

Question

如何每 2 秒自动更改 HTML 背景颜色？带有 CSS3 的 HTML5 淡入还是淡出？

我尝试将过渡与计时器和 CSS 目标一起使用，但没有成功

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

label {
     display: block;
     background: #08C;
     padding: 5px;
     border: 1px solid rgba(0,0,0,.1);
     border-radius: 2px;
     color: white;
     font-weight: bold;
}

input[type=checkbox]:checked ~ .to-be-changed {
    color: red;
}

Answer 1

一些变化 如果您事先知道颜色和颜色数量，那么此变体应该适用于现代浏览器:

.animate-me {
  -webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */ 
  animation: 4s infinite bgcolorchange;
}
@keyframes bgcolorchange {
  0% {
    background-color: red;
  }
  25% {
    background-color: green;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes bgcolorchange {
      0%   {background: red;}
      25%  {background: yellow;}
      75%  {background: green;}
      100% {background: blue;}
 }
 

<div class="animate-me">Trippy! Give me a headache!</div>

http://jsfiddle.net/nnw7xza2/1/

点击演示here !