Question

Is it possible to make two texts blink in a random timing? They should not blink together, but they should blink at a different phase. I tried to accomplish by using normal text-decoration:blink, but no use.. Then I tried using jQuery to fade in and fade out the text with some delay, but I’m hoping there would be some easy way of doing this in CSS3.

Answer 1

You can use CSS @keyframes and animation for this. It wasn’t totally clear from your question if you want different rates of blinking (the sample below), or the same rate, just not in sync. If you want the same rate out of sync, use animation-delay to start one of them after the other.

Demo: 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;} }