How to make text blink with JavaScript and CSS3

Author: Bijay Pakhrin |

Dec

18

2013

Posted in Tutorials No comments

At some point you might come across a situation where you have to use a blinking text in your website or a project. We know blinking text or marquee scrolling is out of date and isn’t really recommended these days for website design but that’s what your client wants, and there’s nothing you can do about it, so you decide to do it.
There used to be CSS property called “text-decoration” and HTML tag “blink” that allowed you to do that easily, but modern browsers these days doesn’t support them anymore. so only option left is to use jQuery for that. Here in this tutorial I’m going to show you a very simple trick you can use to make text blink with JavaScript and CSS3.

• Code
• Demo

jQuery

// we are blinking text using simple setInterval function <script type="text/javascript"> $(function(){ window.setInterval(function(){ // 'blink' class is toggled into 'P' tag between the interval of 500 ms $('P').toggleClass('blink'); }, 500); }); </script>

1 2 3 4 5 6 7 8 9

// we are blinking text using simple setInterval function <script type="text/javascript"> $(function(){ window.setInterval(function(){    // 'blink' class is toggled into 'P' tag between the interval of 500 ms    $('P').toggleClass('blink'); }, 500); }); </script>

CSS

CSS used for Blinking text

CSS

<style ="text/css"> /* We are using CSS3 Property "transition" for the animating blinking text effect */ P {transition: color 200ms ease;} /* The class "Blink" is set to be transparent*/ P.blink {color:transparent;} </style>

1 2 3 4 5 6 7

<style ="text/css"> /* We are using CSS3 Property "transition" for the animating blinking text effect */ P {transition: color 200ms ease;}   /* The class "Blink" is set to be transparent*/ P.blink {color:transparent;} </style>

HTML

<p> This is a demo text that blinks.</p>

1	<p>This is a demo text that blinks.</p>

I am using setInterval function and toggle function to blink text in this tutorial. As you can see, the “blink” class is added on the “P” element which contains the text that we wanted to blink, and between the interval of 500 milliseconds the “blink” class gets added and then removed.
By default we have set the “P” element to have CSS3 transition property which creates the fade in and fade out effect every time a property changes and the class “blink” has the css property of color set to be transparent meaning it makes the text invisible, so every time the “blink” class is added the text becomes invisible and then visible again when the “blink” class is removed.
This is a really simple way to do this and might be useful sometimes.

http://www.andwecode.com/blink-text-using-simple-javascript-css3/#tab-4820-demo