Можно ли сделать два текста в случайном порядке, используя CSS3?

Question

Возможно ли сделать два текста миганием в случайном порядке? Они не должны моргать вместе, но они должны мигать на другом этапе. Я попытался выполнить, используя обычный text-decoration:blink, но не использовать. Затем я попытался использовать jQuery для постепенного исчезновения и постепенного исчезновения текста, но я надеюсь, что в CSS3 будет простой способ сделать это.

Answer 1

Для этого вы можете использовать CSS @keyframes и animation. Из вашего вопроса было не совсем ясно, хотите ли вы разного уровня мигания (образец ниже) или той же скорости, просто не синхронизированной. Если вы хотите, чтобы одна и та же скорость не синхронизировалась, используйте animation-delay, чтобы запустить один из них после другого.

Демо: 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;} }