Alternative blinken mit CSS3-Animation

Question

Ich versuche, eine CSS-only Möglichkeit zu finden, bestimmte Tags (wie oder img) in abwechselnden Mustern zu blinken. Während ich im Codebeispiel ein Mittel finden konnte, um etwas blinkend zu machen (siehe .blinky), war ich nicht in der Lage, zwei getrennte Klassen abwechselnd das Blinken zu machen.

Teil der Lösung möglicherweise die animation-delay Eigenschaft in .blinky2 gezeigt, aber nach der angegebenen Verzögerung in Sekunden, es blinkt synchron mit .blinky und nicht durch die Verzögerung versetzt.

fand ich einige verwandte SO Links, die mir angefangen hat - Imitating a blink tag with CSS3 animations und CSS Tricks - aber ich habe noch keine Anweisungen gesehen für .blink2 Offset Blinken zu definieren. Wird so etwas unterstützt oder bedarf es weiterer Tricks?

.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

Der Schlüssel zu blinken liegt Abwechseln der animation-delay Wert auf die Hälfte der „1“ in animation: blink-animation 1s steps(5, start) infinite bei der Einrichtung zu „0,5s“.

Ich bin nicht sicher, wie eine verallgemeinerte Formel aussehen würde, aber zu diesem Zweck scheint "0.5s" zu funktionieren.

Ich testete dies, indem ich es für 10 Minuten laufen ließ, und abwechselnd abwechselnd blinzelte.

So sieht .blinky2 nun wie folgt aus:

.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

Ich glaube, Sie Keyframes verwenden könnte den Effekt sind Sie nach zu bekommen.

Was ich unten getan habe, ist zwei verschiedene Animationen zu definieren, blink-animation und alt-blink-animation. blink-animation wird auf Tags angewendet und alt-blink-animation wird auf div Tags angewendet.

blink-animation beginnt mit dem Element versteckt, und alt-blink-animation beginnt mit dem Element sichtbar. Wechseln Sie einfach die Keyframes, so dass blink-animation sichtbar ist, während alt-blink-animation ausgeblendet ist und umgekehrt ein alternierender Blink-Effekt erzeugt wird.

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