How to add text blink effect in css2 for chrome browser

Question

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..

Answer 1

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.