How to make text blink on website? [duplicate]

Question

I am making a website and I want a hyperlink on the page to blink. It doens't matter how fast it does, only not too slow. It would also be cool if I could make it blink in different colors.

I have tried using text-decoration:blink; in css, but that didn't work.

I've added this to the css-file, but now what?:

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;
}

Doesn't seem to work

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

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>