让一个 html 元素闪烁背景颜色并淡入另一个答案

【问题标题】：Having a html element flash a background color and fade to another让一个 html 元素闪烁背景颜色并淡入另一个
【发布时间】：2026-01-20 12:30:02
【问题描述】：

我正在寻找一种轻量级的解决方案，让 HTML 元素（如 div 或 li）闪烁一种背景颜色（如纯绿色），然后在一段时间内褪色为另一种颜色，例如在 3 秒内褪色为白色。

我不想包含 jquery 之类的大型库，我只需要在 Firefox 上工作，最轻量级的解决方案更好！

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

【问题讨论】：

标签： javascript css firefox

【解决方案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;
  }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：