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

Answer 1

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.