css - 将背景颜色动画为不同的颜色

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 transitions。