让html元素闪烁背景颜色并淡化为另一种颜色

Question

我正在寻找一种轻量级的解决方案,让一个像div或者一样的HTML元素闪烁一个背景颜色,比如纯绿色,然后在一段时间内淡化为另一种颜色,比如在3秒内褪色为白色.

我不想包含像jquery这样的大型库,我只需要这个就可以在Firefox上工作,最轻量级的解决方案就更好了!

我知道我可以很容易地使用javascript做到这一点,但它不会非常轻量级,我认为必须有一些方法来使用CSS,这将是我认为的理想解决方案.

Answer 1

用一个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;
  }
}