4

I set this css properties text-decoration:blink in my css code. Unfortunately it is only working on firefox. There must be a way to show the blinking effect in Crome. You guys must have the answer..

Jorge
  • 17,896
  • 19
  • 80
  • 126
Soumya Rauth
  • 1,163
  • 5
  • 16
  • 32
  • Seems to be a bug, take a look to this answer http://stackoverflow.com/questions/5981262/webkit-weird-1px-underline-on-text – Jorge Jul 08 '12 at 16:11
  • Possible duplicate : http://stackoverflow.com/questions/4894488/blinking-text-cross-browser – gideon Jul 08 '12 at 16:13

3 Answers3

10

The answer was here: http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation. In this example the class .blink will make something blink... You have to write things twice because Chrome needs -webkit- when Firefox or Opera don't. 

<style>
/**
 * Emulating <blink> using WebKit CSS3 animation        
 *   This code is part of John Smith's blog
 *
 * Copyright 2010 by John Smith, All Rights Reserved
 *
 * @link   http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation
 * @date   18th October 2010 at 11:01 p.m.
 * @author John Smith
 */
@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
        @keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }

.blink {
   text-decoration:blink;

  -webkit-animation-name:blinker;
          animation-name:blinker;  
  -webkit-animation-iteration-count:infinite;  
          animation-iteration-count:infinite;  
  -webkit-animation-timing-function:cubic-bezier(1.0,0,0,1.0);
          animation-timing-function:cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration:1s; 
          animation-duration:1s; 
}
</style>

You may keep (or not) the old blink attribute for older browsers (as you wish).

I prefer to use only -webkit- (once) and i keep the text-decoration since Opera and Firefox know about it. (For other animations, no choice. Just for blinking they already know how to do).

But it's just because i don't like to write it twice and i'm lazy. It's not an advice.

hakre
  • 193,403
  • 52
  • 435
  • 836
Daco
  • 101
  • 1
  • 2
  • 2
    When you take over code from a different website and "quote" it in your answer - naturally purely for educational purposes - please make the original author and copyright information visible to the following visitors. Otherwise you might create the impression that part of your answer would have been yours and therefore licensed under [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0/). I did an exemplary edit in your answer so this can be better seen now. – hakre Jul 09 '13 at 07:47
  • 1
    The question's title states that it should be done using CSS2. This is CSS3. – Luna Aug 05 '14 at 14:11
3

Unfortunately Chrome doesn't support the CSS blink value of this attribute. You'll need to use jQuery to create the same effect. Something like http://archive.plugins.jquery.com/project/blink

greg84
  • 7,541
  • 3
  • 36
  • 45
  • 2
    While your conclusion/statement/answer is entirely correct, I must disagree with the your use of the word 'unfortunately.' =) – David Thomas Jul 08 '12 at 16:12
  • 3
    Well no, I uphold my "unfortunately"! Sometimes it really is necessary to make something blink. I know it can be overused, but when data is streamed live to a web UI where it's constantly monitored it may be necessary to highlight something in this way. – greg84 Jul 08 '12 at 16:14
  • theres a reason its still around. the tag is a bad idea because its not semantic, but the functionality was never bad – Tyler Gillies Mar 23 '13 at 21:56
2

You never NEED jQuery for a javascript effect. jQuery is an entire JavaScript library, which means that could be done in a few lines of code, without loading an entire library. Now, if you ARE already using jQuery, then it is a lot easier.

Eric Sebasta
  • 225
  • 1
  • 7