Introduction to CSS Blinking Text
Blinking Text in CSS is defined as changing the color of the text with equal time intervals. Blinking Text generally is used for capturing some one’s attention to look at the link or text. Blinking Text feature has been deprecated and no longer used by developers.
Real-Time Example:
Blinking Text is used when updating important news in the news website. Because it is a human tendency to look at the things which are changing continuously. So, by making the text blink, it takes some attention very quickly.
How does Blinking Text work in CSS?
The text will be blinked based on the property value assigned to it. Text Blinking feature can be done by animation property and @keyframes selector.
Syntax:
selector{
animation: blinker time_in_seconds up_to_blink_time;
}
@keyframes blinker {
60% {
opacity: 0;
}
}Explanation:
- animation: blinker time_in_seconds up_to_blink_time: blinker makes text blink, time_in_seconds up makes text blink after every provided time and up_to_blink_time makes how much time text has to blink.
- @keyframes: @keyframes selector provides the blinking text with opacity.
Examples of CSS Blinking Text
Given below are the examples of CSS Blinking Text:
Example #1
Blinking Entire Text Example.
HTML Code: BlinkingTotalText.html
<!DOCTYPE html>
&alt;html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BlinkingTotalText.css">
<title>Blinking Text</title>
</head>
<body>
<h2>Demo for Blinking Entire Text</h2>
<p class="a1">Blinking Text in CSS defined as changing color of the text with
equal time intervals.</p>
<p class="a2">Blinking Text is using when updating important news in the news
website. Because it is human tendency to look at the things which are
changing continuously. So, by making the text blink takes some
attention very quickly.</p>
</body>
</html>CSS Code: BlinkingTotalText.css
h2{
color: green;
}
.a1, .a2{
animation:blinking 1.5s infinite;
font-size: 20px;
}
@keyframes blinking{
0%{ color: red; }
47%{ color: #000; }
62%{ color: transparent; }
97%{ color:transparent; }
100%{ color: #000; }
}Output:
Explanation:
- As you can see in the above code animation property has 3 values blinking 1.5s infinite. It means text blinks every 1.5 seconds up to infinite time.
- @keyframes selector has one value beside is the same as above animation property value, Then only blinks property works.
- As you can observe above output images each output image text changes from red color to normal black color. So, in this way text blinks.
Example #2
Blinking Span(Portion of) Tag Text Example.
HTML Code: SpanTextBlink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="SpanTextBlink.css">
<title>Blinking Text</title>
</head>
<body>
<h2>Demo for Blinking Span Text</h2>
<p>Blinking Text in <span class="a1">CSS</span> defined as <span class="a1">CHANGING</span> color of the text with
equal time intervals.</p>
<p>Blinking Text is using when <span class="a1">UPDATING</span> important news in the news
website. Because it is <span class="a1">HUMAN</span> tendency to look at the things which are
changing continuously. So, by making the text blink takes some
attention very quickly.</p>
</body>
</html>CSS Code: SpanTextBlink.css
h2{
color: green;
}
p
{
border: 2px solid;
}
.a1, .a2{
animation:blinking 2s infinite;
font-size: 25px;
}
@keyframes blinking{
0%{ color: yellow; }
47%{ color: #000; }
62%{ color: transparent; }
97%{ color:transparent; }
100%{ color: #000; }
}Output:
Explanation:
- As you can see in the above code animation property has 3 values blinking 2s infinite. It means text blinks every 2 seconds up to infinite time.
- @keyframes selector has one value beside is the same as above animation property value, Then only blinks property works.
- As you can observe above output images each output image text changes from a yellow color to normal black color. So, in this way text blinks.
Example #3
Blinking Header Text Example.
HTML Code: HeaderTextBlink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="HeaderTextBlink.css">
<title>Blinking Text</title>
</head>
<body>
<h1>Demo for Blinking Span Text</h1>
<h2 class="a1">Hi Hello I am Header, I can also blink</h2>
</body>
</html>CSS Code: HeaderTextBlink.css
h2{
color: green;
}
.a1{
animation:blinking 1s infinite;
}
@keyframes blinking {
0%{ color: blue; }
50%{ color: transparent; }
100%{ color: black; }
}Output:
Explanation:
- As you can see in the above code animation property has 3 values blinking 1s infinite. It means text blinks every 1 second up to infinite time.
- @keyframes selector has one value beside is the same as above animation property value, Then only blinks property works.
- As you can observe above output images each output image text changes from blue color to normal black color. So, in this way text blinks.
Example #4
Blinking Entire Text Example.
HTML Code: LiveButtonDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="LiveButtonDemo.css">
<title>Blinking Text</title>
</head>
<body>
<h1>Demo for Live Button Blink</h1>
<div class="mainDiv">
<i class="liveButton"></i> LIVE STREAMING
</div>
</body>
</html>CSS Code: LiveButtonDemo.css
.liveButton {
height: 20px;
width: 20px;
border-radius: 12px;
background-color: red;
margin-right: 10px;
animation: blinking 1.5s linear infinite;
}
@-webkit-keyframes blinking {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.mainDiv {
flex-direction: row;
display: flex;
}Output:
Explanation:
- As you can see in the above code animation property has 3 values blinking 1s infinite. It means text blinks every 1.5 seconds up to infinite time.
- @-webkit-keyframes selector has one value beside is the same as above animation property value, Then only blinks property works.
- As you can observe above output images each output image text changes from red color to normal black color. So, in this way text blinks.
Conclusion
Text Blinking feature can be done by animation property with blinking(any name), blink time, and up to blink time and @keyframes selector beside blinking(any name) same as given in animation and opacity property value.
Recommended Articles
This is a guide to CSS Blinking Text. Here we discuss the basic concept, different examples, and how does blinking text works in CSS? You may also have a look at the following articles to learn more –
