How to make text blink on website?

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

The 1990s called and do **NOT** want their `` back. In fact, the 1990s offered up a bazillion dollars to keep the tag away. — Marc B, Nov 28 '13 at 15:45
Please search for answer before you post a question. I'm sure it's not that difficult. here you go http://stackoverflow.com/questions/1605698/text-blinking-jquery — San, Nov 28 '13 at 15:46
:( is deprecated (firefox 23). This is for a reason. It is so annoying it is scary — Henk Jansen, Nov 28 '13 at 15:47
Comic Sans and marquee already in place. I only need blink now. — Commodent, Nov 28 '13 at 15:52
`-webkit` is a vendor prefix for `webkit` based browsers, so you'll need the other vendor prefixes if you want it to work in other browsers that support `CSS3 Animation` — Nick R, Nov 28 '13 at 15:53
Why all the downvotes? Seems like a legit question. We're not here to judge from a UX-standpoint. +1 for curiosity — Jens Bergvall, Nov 28 '13 at 15:56
Downvotes are for being lazy. It took all of 2 seconds to find the answer using SO search (`[css] blink`). — cimmanon, Nov 28 '13 at 16:01
I don't always make text blink with CSS, but when I do - I don't. — crmpicco, Nov 28 '13 at 17:47
I'm using this as an alternate to a spinner, which looks very cool. So fk y'all — jim smith, May 30 '17 at 12:47

pstenstrm · Accepted Answer · 2013-11-28T17:42:59.753

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

I've updated my answer with how you can remove the fading effect — pstenstrm, Nov 28 '13 at 17:43

score 4 · Answer 2 · answered Nov 28 '13 at 16:29

4

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>

answered Nov 28 '13 at 16:29

Nit

57
1

3

I don't see any jquery tag. – Martin Smith Nov 28 '13 at 16:51

score 0 · Answer 3 · edited May 23 '17 at 11:33

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.

How to make text blink on website?

3 Answers3

Update

Linked