How to make text blink on website?
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
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>