<blink> in modern browsers?

Question

I'm working on a project to create a website for our CS faculty. There's one problem though. We want certain elements on the page highlighted in a meaningful manner. The solution must be cross-browser (i.e. must work in IE).

Thus, a question:

How to emulate blink (works perfectly in IE6) in modern browsers (think Chrome)?

Update: I've found this jQuery plugin to do the blinking, but we don't use jQuery and would prefer a CSS3 fallback for modern browsers.

Answer 1

You don't have to make a class. Use the traditional tag and simply add CSS for it.

Via Straight CSS:

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

Straight CSS Added Via JS

if ("[object HTMLUnknownElement]" === Object.prototype.toString.call(document.createElement('blink'))) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}

---

/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; }

<p><blink>I Blink</blink></p>
<hr />
<p><noblink>I don't</noblink></p>

Answer 2

I wonder why no one has suggested CSS3 Animations:

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.blink {
  animation: blink 600ms infinite;
}

Demo on JSBin.

Answer 3

You can just use CSS text-decoration property for that purpose:

For example:

span {
    text-decoration: blink;
}

Let all span nodes blink.. blink.. blink.. blink..

Answer 4

Here's some JavaScript to emulate <blink>:

var blink = (function () {
  var elems;

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

  this.start = function () {
    elems = document.getElementsByClassName('blink');
    setInterval(blink, 500);
  };

  return { start: start };
}());

addEventListener('load', blink.start);

CodePen demo

Just add the class blink to any element.

Answer 5

just a remark : if you want to "blink" a link, it's better to change the color of the blinked text instead of hiding it because when it's hidden you can't click on it and so it's become a game to try to click on the link :-)

function toggleBlink() {
    for(var i = 0; i < blinkers.length; i++) {
        if(blinkers[i].style.color == 'red') {
            blinkers[i].style.color = 'white';
        } else {
            blinkers[i].style.color = 'red';
        }
    }
}

// "white" is the color of my background