hod caspi hod caspi - 4 months ago 15
CSS Question

javascript css3 change background color every 2 seconds

How can I change the HTML background color automatically every 2 seconds? HTML5 with CSS3 fade in or fadeout?

I tried to use transition with timer and CSS target without any success

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

A few changes A variation on this should work in modern browsers, if you know the colors and the number of colors in advance:

.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/

Click to demohere!

Comments