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 p

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