How to make text blink on website? [duplicate]

Answer 1

You can do this pretty easily with CSS animations.

a {   
  animation-duration: 400ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

You can also extend it to change colors. With something like:

@keyframes blink {
  0% {
    opacity: 1;
    color: pink;
  }

  25% {
    color: green;
    opacity: 0;
  }

  50% {
    opacity: 1;
    color: blue;
  }

  75% {
   opacity: 0;
   color: orange;
 }

 100% {
   opacity: 1;
   color: pink;
 }
}

Make sure to add vendor prefixes

Demo: http://codepen.io/pstenstrm/pen/yKJoe

Update

To remove the fading effect you can do:

b {
  animation-duration: 1000ms;
  animation-name: tgle;
  animation-iteration-count: infinite;
}

@keyframes tgle {
  0% {
    opacity: 0;
  }

  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }

  99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

This is also a useful trick when animating image-sprites

Answer 2

You seem to have copied code from the accepted answer to Blink not working in Chrome. The answer is wrong, however, and only tries to address WebKit browsers. The following code works in WebKit browsers, in modern Firefox, and in IE 10+ (I have set the parameters to simulate the way the classic <blink> worked):

@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}
blink {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}

For a real cross-browser solution, you need JavaScript. It’s straighforward timed changes; see e.g. some answers to Text blinking jQuery.

Answer 3

Its easy to make a text blink:

window.setInterval(function() {
$('#blinkText').toggle();
}, 300);

and in html, just give as follows:

<p id="blinkText">Text blinking</p>