css - javascript css3 change background color every 2 seconds -

css - javascript css3 change background color every 2 seconds -

how can alter html background color automatically every 2 seconds? html5 css3 fade in or fadeout?

i tried utilize transition timer , css target without 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; }

a few changes variation on should work in modern browsers, if know colors , number of colors in advance:

class="snippet-code-css lang-css prettyprint-override">.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;} } class="snippet-code-html lang-html prettyprint-override"><div class="animate-me">trippy! give me headache!</div> http://jsfiddle.net/nnw7xza2/1/

click demohere!

javascript css html5 transition background-color