Blinking text cross browser

Question

I want to make a blinking text.

First I tried the <blink> HTML tag, but it is only supported in Mozilla Firefox.

Then I tried CSS:

<style>
.blink {text-decoration: blink; }
</style>

It's not working on IE 6.

Then I tried javascript:

<script type="text/javascript">
function doBlink() {
  // Blink, Blink, Blink...
  var blink = document.all.tags("BLINK")
  for (var i=0; i < blink.length; i++)
    blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "" 
}

function startBlink() {

  if (document.all)
    setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>

Now it's not working on Safari or Chrome.

Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)

Just a little note: This was universally considered an extremely bad idea back in the 90s. Everyone but the advertisers hated it. — NotMe, Feb 04 '11 at 04:15
You should just pass the function, and not a string to `setInterval`. i.e. `setInterval(doBlink,500)` — karim79, Feb 04 '11 at 04:16
@chris @danjah i know blinking text is bad idea but its demanded by my client. — enthusiastic, Feb 04 '11 at 04:27
And nowadays even Mozilla Firefox dropped support for the `` element. — knittl, Aug 09 '13 at 12:10
possible duplicate of [Alternative for ](http://stackoverflow.com/questions/18105152/alternative-for-blink) — Léo Lam, Jul 21 '15 at 06:29

score 43 · Accepted Answer · edited Dec 26 '13 at 10:48

43

This can be achieved with CSS3 like so

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}
blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.

edited Dec 26 '13 at 10:48

Tushar Gupta - curioustushar

58,085
24
103
107

answered Nov 29 '11 at 21:46

Jesse Hattabaugh

7,876
8
34
38

Is there any pure CSS way to make it look the old way? (I mean with no transitions - just blinking) The _steps_ treats strange... – m93a Dec 15 '12 at 21:17
3

Got it! When I set Keyframes to `0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }` and the element's timing function to `steps(1)`, it treats as expected :) – m93a Dec 15 '12 at 21:33
3

@arkanciscan: If you copy code from other authors for educational purposes, please provide reference to where you've taken it from. For example with this answer, you probably have not written it your own so in case this is true, please update your answer and provide reference. – hakre Jul 09 '13 at 07:52

score 11 · Answer 2 · answered Jun 20 '13 at 00:41

The truly cross browser / legacy browser blink tag...

HTML

<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>

<!--[if lt IE 10]>
<script>

toggleItem = function(){
    var el = document.getElementsByTagName('blink')[0];
    if (el.style.display === 'block') {
        el.style.display = 'none';
    } else {
        el.style.display = 'block';
    }
}

setInterval(toggleItem, 1000);

</script>
<![endif]-->

</html>

CSS

blink {
  -webkit-animation: blink 1s steps(5, start) infinite;
  -moz-animation:    blink 1s steps(5, start) infinite;
  -o-animation:      blink 1s steps(5, start) infinite; 
  animation:         blink 1s steps(5, start) infinite;
}

@-webkit-keyframes blink {
  to { visibility: hidden; }
}
@-moz-keyframes blink {
  to { visibility: hidden; }
}
@-o-keyframes blink {
  to { visibility: hidden; }
}
@keyframes blink {
  to { visibility: hidden; }
}

One seeming consequence of using `visibility` is this use of animation does not seem to work for `:hover` (at least on Firefox 34 on Linux, where it cycles once, perhaps the "hovering" state is not possible for a hidden element and is not re-enabled when the element becomes visible). Using `opacity` seems to be more robust. — , Dec 29 '14 at 22:41

score 4 · Answer 3 · answered Aug 11 '13 at 22:32

4

var el = $(".blink");
setInterval(function() {el.toggle()}, 500);

answered Aug 11 '13 at 22:32

Laukhin Andrey

149
1
3

3

`setInterval(el.toggle, 500);` – Derek 朕會功夫 Jan 09 '14 at 09:17
2

This is bad because when the element is hidden, the layout will be affected, and the whole page might be moving around. – Raptor Jun 21 '17 at 04:14

score 2 · Answer 4 · answered Aug 09 '13 at 12:07

Simple jquery implementation, feel free to extend to fit your needs http://jsfiddle.net/L69yj/

var element = $(".blink");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}

score 1 · Answer 5 · edited Sep 03 '13 at 15:28

Works in IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0

blink(0.7);

function blink(speed) {

    if (speed) {
        if (document.getElementsByTagName('blink')) 
            setInterval("blink()", speed*2000);

        return; 
    }

    var blink = document.getElementsByTagName('blink');

    for (var i=0; i<blink.length; i++) {
        blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
    }
}

score 1 · Answer 6 · edited Jul 04 '14 at 11:23

1

<p id="blink">My name is Ankurji1989</p>


<script type="text/javascript">

var blink_line = document.getElementById("blink");

function d_block(){

    if(blink_line.style.visibility=='hidden')
    {
        blink_line.style.visibility='visible';
    }
    else{
        blink_line.style.visibility='hidden';
    }

}
setInterval(function(){d_block();}, 1000);

</script>

edited Jul 04 '14 at 11:23

Paresh Mayani

127,700
71
241
295

answered Jul 04 '14 at 11:09

Ankur Kumar

435
3
9

user2619700 · Answer 7 · 2015-01-07T06:26:20.043

1

It is working smoothly in all the browsers...Please try it it will work

<script type="text/javascript">
    function blinker()
    {
        if(document.getElementById("blink"))
        {
            var d = document.getElementById("blink") ;
            d.style.color= (d.style.color=='red'?'white':'red');
            setTimeout('blinker()', 500);
        }
    }
</script>

<body onload="blinker();">
    <div id="blink">Blinking Text</div>
</body>

edited Jan 07 '15 at 06:26

answered Jan 07 '15 at 06:08

user2619700

51
5

2

You should use setTimeout(blinker, 500) instead of setTimeout('blinker()', 500) – devconcept May 07 '15 at 18:16

score 1 · Answer 8 · edited Apr 15 '13 at 10:41

Try this jQuery

function blinks(hide) {
    if (hide === 1) {
        $('.blink').show();
        hide = 0;
    }
    else {
        $('.blink').hide();
        hide = 1;
    }
    setTimeout("blinks("+hide+")", 400);
}

$(document).ready(function(){
    blinks(1);
});

Note : include the jquery file and give a class name 'blink' on element which you want to blink.

Tip: .show() and .hide() doesn't not reserve the width and height of the element... If you need to hide the element, but not his place (dimentions) at the document, use .css("visibility", "hidden or visible") instead.

score 0 · Answer 9 · answered May 07 '15 at 18:07

This works great:

<script type="text/javascript">
    function blinker()
    {
        if(document.querySelector("blink"))
        {
            var d = document.querySelector("blink") ;
            d.style.visibility= (d.style.visibility=='hidden'?'visible':'hidden');
            setTimeout('blinker()', 500);
        }
    }
</script>



<body onload="blinker();">
    <blink>Blinking Text</blink>
</body>

It looks really like the old version, plus it is used the same too.

Peterp · Answer 10 · 2017-02-21T03:59:55.260

0

This is not my code, but it works well in our web site. Only problem is that It works if included in the html but not when referenced as a seperate script.

    <style>
    #blinker    { color: #58bf7a }
    #blinker.on { color: #58d878 }
    </style> 

    <script> 
        var blinker;
        function blink() {
            blinker.className = blinker.className ? "" : "on";
        }
        window.onload = function() {
            blinker = document.getElementById("blinker");
            var interval_id = setInterval(blink, 1000);
        }
    </script>

edited Feb 21 '17 at 03:59

answered Feb 21 '17 at 03:30

Peterp

1
2

It also needs a line something like this of course...
What's New?

Peterp

Feb 21 '17 at 03:41

score 0 · Answer 11 · edited Oct 19 '12 at 03:39

You can also use this:

function blinkIt() {
    if (!document.all) return;
    else {
        for(i=0;i<document.all.tags('blink').length;i++){
            s=document.all.tags('blink')[i];
            s.style.visibility=(s.style.visibility=='visible') ?'hidden':'visible';
        }
    }
}

You may use a timer instead of using the tag. I have tested this on IE7 and Firefox. Both browsers allow this, however Chrome doesn’t work properly. Hope you got the answer.

Blinking text cross browser

11 Answers11

What's New?

Linked