使用CSS3动画交替闪烁

Question

我正在寻找一种仅使用CSS的方法来使特定标签（如p或img）以交替模式闪烁。虽然我已经能够找到一种方法使任何东西闪烁（请参见代码示例中的.blinky），但我无法使两个单独的类交替闪烁。

解决方案的一部分可能是animation-delay属性，如.blinky2所示，但在指定的延迟时间后，它会与.blinky同步闪烁，而不是偏移延迟时间。

我找到了一些相关的SO链接，让我开始——用CSS3动画模拟闪烁标记和CSS技巧——但我还没有看到任何定义.blink2的偏移闪烁的说明。这种事情是否得到支持，还是需要进一步的技巧？

.blinky {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  font-size: x-large;
  color: blue;
  display: inline;
}

.blinky2 {
  /* Need make this alternate blinking*/
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  /* This just postpones blinking for 1-sec, then it's in sync with .blinky*/
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  font-size: x-large;
  color: red;
  display: inline;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

<p>The <var>blinky</var> and <var>blinky2</var> classes should alternate blinking.</p>

<div>
  <p class="blinky">Blinky</p>
  <p class="blinky2">Blinky 2</p>
  <p class="blinky">Blinky</p>
  <p class="blinky2">Blinky 2</p>
  <p class="blinky">Blinky</p>
</div>

- RandomHandle

Answer 1

我认为您可以使用关键帧来实现您想要的效果。

下面我定义了两个不同的动画，blink-animation和alt-blink-animation。 blink-animation应用于p标签，而alt-blink-animation应用于div标签。

blink-animation从隐藏元素开始，而alt-blink-animation从可见元素开始。只需交替使用关键帧，使blink-animation可见，而alt-blink-animation隐藏，反之亦然，即可产生交替闪烁的效果。

<p>First blink</p>

<div>Alt Blinking</div>


<style>
  p{
    animation: blink-animation 1s infinite;
  }

  div{
    animation: alt-blink-animation 1s infinite;
  }

  @keyframes blink-animation {
    0% { opacity: 0;}
    100% { opacity: 1;}
  }

  @keyframes alt-blink-animation {
    0% { opacity: 1;}
    100% { opacity: 0;}
  }

</style>

- katniss.everbean

---

非常接近了。起初，它交替闪烁。但当我让它继续闪烁并回到桌子前时，它开始同步闪烁。 - RandomHandle

你用了多久才看到它同步了，你用的是哪个浏览器？我已经在FireFox上运行了大约五分钟，但它仍在交替。想知道我是否遗漏了什么，或者同步是否与浏览器有关。 - katniss.everbean

可能是浏览器的问题。我正在使用 Chrome 并为一个专门使用 Chrome 的工作环境编写代码。 - RandomHandle

在Chrome中运行相同的代码已经几个小时了，但仍然交替出现。很奇怪。你的闪烁模式比示例更复杂吗？或者还有更相关的代码可能导致差异？ - katniss.everbean

我将所有内容都保留为文本，以保持简单，但实际上，“.blinky2”正在闪烁包含图像的div。 - RandomHandle

Answer 2

交替闪烁的关键在于将animation-delay值设置为animation: blink-animation 1s steps(5, start) infinite中的"1s"的一半，即"0.5s"。

我不确定通用公式会是什么样子，但对于这个目的来说，"0.5s"似乎可以。

我通过让它运行10分钟进行了测试，仍然保持着交替闪烁。

所以，.blinky2现在看起来像这样：

.blinky2 {
  /* Need make this alternate blinking*/
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;

  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  font-size: x-large;
  color: red;
  display: inline;
}

- RandomHandle