將動畫的背景顏色設爲不同的顏色

Question

如何將div的背景底色從最淺的橙色變爲最暗的紅色，並返回（這會使它看起來像發光效果）？

我創建了一個jsFiddle，但它只將淺灰色（靜態設置）的顏色更改爲紅色。這是我得到的。

我確實發現了一些關於動畫顏色的問題，但沒有涉及多種顏色。

任何幫助真的很感激。

Answer 1

將此CSS添加到您的div。 http://jsfiddle.net/Nillervision/a4ELz/

.test { 
    overflow: hidden; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 40px; 
    line-height: 3;  
    -webkit-animation: glow linear 1s infinite; 
    animation: glow linear 1s infinite; 
} 
@-webkit-keyframes glow { 
    0% { background-color:red; } 
    50% { background-color:orange; } 
    100% { background-color:red; } 

} 
@keyframes glow { 
    0% { background-color:red; } 
    50% { background-color:orange; } 
    100% { background-color:red; } 
} 

如果你只希望動畫運行一次在頁面加載刪除「無限」的值。 如果您希望在懸停時發生效果，則可以改爲使用css轉換。