Blinking text effect was mostly used effect using <blink> element of HTML but all know that the <blink> element is now deprecated, but still we can make blinking text effect with either CSS3 or jQuery.
Blinking text effect is basically works on opacity means first set opacity to 1 and than put it to 0 with some delay. Let’s play with code.
Using CSS3
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<span class="blink_me">Wow, its a blinking link!</span>
Here, i have used vendor prefixes but still older browser won’t support this effect so alternatively we should use jquery fadeIn() and fadeOut() method to blink text. Learn more about CSS at https://css-diary.com/measurement-units-in-css/
Using jQuery
We are going to mess with jquery so first of all we need to import jquery library in order to make working it’s all functions.
function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}
setInterval(blinker, 1000); //Runs every second
<span class="blink_me">Wow, its a blinking link!</span>
