How to add blink text effect in css2 for Chrome browser

Question

I set these css text-decoration:blink properties to my css code. Unfortunately, it only works with firefox. There should be a way to show the flashing effect in Crome. You guys have to answer.

Answer 1

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

 <style> /** * Emulating <blink> using WebKit CSS3 animation * This code is part of John Smith 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 pm * @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 can save (or not) the old blink attribute for old browsers (as you wish).

I prefer to use only -webkit- (once), and I keep the text layout as Opera and Firefox are aware of this. (For other animations there is no choice. Only for blinking, they already know how to do this).

But this is simply because I do not like to write it twice, and I am lazy. This is not advice.

Answer 2

Unfortunately, Chrome does not support the blink value for this CSS attribute. You will need to use jQuery to create the same effect. Something like http://archive.plugins.jquery.com/project/blink

Answer 3

You have never NEED jQuery for javascript effect. jQuery is a complete JavaScript library, which means that it can be done in several lines of code without loading the entire library. Now, if you are already using jQuery, this is much easier.