Question

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

解决方案的一部分可能是animation-delay中显示的.blinky2属性，但在指定的延迟时间（秒）后，它会与.blinky同步闪烁而不会被延迟抵消。< / p>

我找到了一些让我开始使用的相关SO链接 - Imitating a blink tag with CSS3 animations和CSS Tricks - 但我还没有看到为.blink2定义偏移闪烁的任何说明。支持这样的事情，还是需要进一步的技巧？

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

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>

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

使用CSS3动画替代闪烁

2 个答案: