Change Background-Color of div element Cross Fade in a Loop

Question

I want to change the background color of a div element from black to red to blue via crossfade , but right now have no idea how to do it. I tried doing it with images, but putting an image as background and change via fade effect makes it heavy. Is there any way to do it via CSS or Javascript? Please Help.

Answer 1

CSS:

.fadechange {
    height:200px;
    width:100%;
    background: black;
    animation: fading 4s infinite;
   -webkit-animation: fading 4s infinite;
}

@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

According to w3schools this must work in IE(10+), Opera, Chrome, Safari and Firefox. http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

jsfiddle