1

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
balanv
  • 10,686
  • 27
  • 91
  • 137
  • 1
    What do you mean by random? That the period keeps changing or only that the period is different between the texts? What have you tried? – Roger Lindsjö Dec 24 '11 at 07:33
  • "The period is different between the texts".. 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 guess there would be some easy way of doing this in css3.. – balanv Dec 24 '11 at 07:37
  • 4
    Are you sure you *want* to do that? – Keith Thompson Dec 24 '11 at 07:40
  • Blink has often been said to be *the* most annoying effect ever, which led to most browsers not even having blink support in CSS. You probably can't do it without JS or Flash. However, I'd suggest you don't do it at all. I'm having trouble fitting "blink" and "useful" in the same sentence. – Amadan Dec 24 '11 at 07:46
  • 1
    It is useful to blink because it remove irritants from the surface of the cornea. There you go ;-) – ColinE Dec 24 '11 at 07:51
  • 1
    Server-side blink implementation: http://cheese.blartwendo.com/web21-demo.html -- just run two of these with [coprime intervals](http://en.wikipedia.org/wiki/Coprime) and the blinks won't line up very often. – sarnold Dec 24 '11 at 08:10

1 Answers1

3

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;} }
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239