与CSS3动画交替闪烁

Question

我正试图找到一种CSS方式来使特定标记（如p或img）以交替模式闪烁。尽管我已经能够找到使代码示例中的任何东西闪烁的方法（请参阅.blinky），但我还是无法让两个单独的类交替闪烁。

解决方案的一部分可能是.blinky2中显示的animation-delay属性，但在指定的延迟（以秒为单位）后，它会与.blinky同步闪烁，并且不会被延迟所抵消。

我发现了一些相关的链接，让我开始 - Imitating a blink tag with CSS3 animations和CSS Tricks - 但我还没有看到任何指令来定义偏移闪烁.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>

Answer 1

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

我不确定泛化公式的外观是什么样子，但为了这个目的，“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; 
} 

Answer 2

我认为你可以使用关键帧来获得你后的效果。

我在下面所做的是定义了两个不同的动画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>