更改背景顏色的div元素交叉漸變在一個循環中

Question

我想通過交叉漸變將div元素的背景顏色從黑色更改爲藍色，但現在不知道如何去做。我試圖用圖像做，但將圖像作爲背景並通過淡入淡出效果進行更改使其變得沉重。有什麼辦法通過CSS或Javascript來做到這一點？請幫忙。

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; } 
} 

根據W3Schools的這必須在IE（10+），歌劇，鉻，Safari和Firefox的工作。 http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

jsfiddle