Можно ли заставить два текста мигать в случайном порядке, используя 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;} }