CSS3アニメーションで点滅を交互に行う

Question

特定のタグ（pまたはimgなど）を交互に点滅させるCSS専用の方法を見つけようとしています。コードサンプルで何かを点滅させる方法（.blinkyを参照）を見つけることができましたが、2つの別々のクラスを点滅させることができませんでした。

.blinky2にはプロパティが表示されますが、指定された遅延時間（秒）後には、.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に「1」の半分にanimation-delay値を設定する際に点滅嘘を交互にキーに「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という2つの異なるアニメーションを定義しています。 blink-animationはpタグに適用され、alt-blink-animationはdivタグに適用されます。

blink-animationは、要素hiddenで始まり、alt-blink-animationは要素visibleで始まります。 alt-blink-animationが隠されている間にキーフレームを交互に切り替えるだけで、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>