CSS3を使って2つのテキストをランダムなタイミングで点滅させることはできますか？

Question

ランダムなタイミングで2つのテキストを点滅させることはできますか？一緒に点滅すべきではありませんが、別のフェーズで点滅する必要があります。私は通常のtext-decoration:blinkを使用して達成しようとしましたが、使用しません。次にjQueryを使用してテキストをフェードインおよびフェードアウトしましたが、CSS3でこれを行う簡単な方法があると考えています。

Answer 1

これには、CSS @keyframesとanimationを使用できます。異なる点滅速度（下記のサンプル）、または同じ速度を同期させたくないのであれば、あなたの質問から完全にはっきりしませんでした。同じレートを同期させたくない場合は、animation-delayを使用して、次の1つを開始してください。

デモ：http://jsfiddle.net/ThinkingStiff/SYGpy/

HTML：

<div id="fast">fast</div> 
<div id="regular">regular</div> 
<div id="slow">slow</div> 

CSS：

#fast { 
    animation:    blink 300ms linear infinite; 
     -moz-animation: blink 300ms linear infinite; 
     -webkit-animation: blink 300ms linear infinite; 
} 

#regular { 
    animation:    blink 750ms linear infinite; 
     -moz-animation: blink 750ms linear infinite; 
     -webkit-animation: blink 750ms linear infinite; 
} 

#slow { 
    animation:    blink 1500ms linear infinite; 
     -moz-animation: blink 1500ms linear infinite; 
     -webkit-animation: blink 1500ms linear infinite; 
} 

@keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } 
    @-moz-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } 
    @-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }