让html元素闪烁背景色并褪去另一个

Question

我正在寻找一个轻量级解决方案，让HTML元素像div或li闪烁一个背景色，如纯绿色，然后淡入淡出另一种颜色有些时间段像在3秒内褪色成白色。

我不想加入一些像jquery这样的海量库，而我只需要这个在Firefox上工作，最轻的解决方案就更好了！

我知道我可以很容易地做到这一点与JavaScript，但它不会很轻量级，我认为必须有某种方式来与CSS做到这一点，这将是我认为的理想解决方案。

Answer 1

Use an animation。请记住，您可能需要在此前加前缀以使其适用于所有目标浏览器。

HTML

<div id='flashMe'></div> 

CSS

#flashMe { 
    height:500px; 
    width:500px; 
    background:black; 

    animation: flash 3s forwards linear normal; 
} 
@keyframes flash { 
    0% { 
    background:black; 
    } 
    4% { 
    background:green; 
    } 
    100% { 
    background:red; 
    } 
} 

Answer 2

你可以看看CSS3动画。我对CSS3不太擅长，所以我不能提供任何解决方案，但afaik CSS3可以做这样的事情。

http://www.w3schools.com/css3/css3_animations.asp