How to make text blink on website? [duplicate] - html

Question

This question already has answers here:
Alternative for <blink>
(14 answers)
Closed 9 years ago.
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>

Answer 3

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.