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