讓一個循環的div背景淡入不同的顏色

Question

我試圖讓div的背景顏色不斷變化4或5次，但是不知道從哪裏開始。我需要非常精確的時機，因爲我還必須在背景顏色的同時淡出圖像。

最好的辦法是做什麼？ jQuery或css？

感謝

編輯 我已經能夠使用CSS動畫製作背景屬性改變顏色和關鍵，像這樣：

<div class="fading"></div> 

.fading { 
    height:200px; 
    width:100%; 
    background: black; 
    animation: fading 30s infinite; 
    -webkit-animation: fading 30s infinite; 
    border-radius:5px; 
} 
@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; } 
} 

但林不知道這是否會保持相同的時間作爲jquery會，哪個病被用來淡入和淡出圖像？

同樣擔心在舊版瀏覽器上會發生什麼情況，我是否應該考慮使用任何故障保險箱？

Answer 1

時間應保持不變。這裏我已經包含了沒有jQuery的漸變圖片。鑑於代碼，我不認爲你真的需要這樣做的幫助，但回答這個問題，因爲它也適用於較舊的瀏覽器，但jQuery可能是一個更好的選擇。

演示http://jsfiddle.net/dP8fL/1/（時間改爲10秒少等待檢查它的工作原理）

<div class="fading"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl7V8rHy90EMd_IYWwbiucARcCPDHnwBkoB7T3ZJjDdqauT-j3eQ" /> 
</div> 

CSS

.fading { 
    height:200px; 
    width:100%; 
    background: black; 
    animation: fading 30s infinite; 
    -webkit-animation: fading 30s infinite; 
    border-radius:5px; 
} 
.fading img{ 
    width:100px; 
    animation: opacityfading 30s infinite; 
    -webkit-animation: opacityfading 30s infinite; 
    margin:30px; 
} 
@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; } 
} 
@keyframes opacityfading { 
    0% { opacity: 0; } 
    33% { opacity: 1; } 
    66% { opacity: 0; } 
    100% { opacity: 1; } 
} 

@-webkit-keyframes opacityfading { 
    0% { opacity: 0; } 
    33% { opacity: 1; } 
    66% { opacity: 0; } 
    100% { opacity: 1; } 
}