javascript - 让 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;
  }
}