Updated June 17, 2023
Introduction to CSS Blinking Text
Blinking Text in CSS is defined as changing the color of the text with equal time intervals. Blinking Text is generally used to capture someone’s attention to the link or text. The blinking Text feature has been deprecated and is no longer used by developers.
Real-Time Example:
Blinking Text is used when updating important news on the news website. Because it is a human tendency to look at things that are changing continuously. So, making the text blink 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 the 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>
<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 the same as the above animation property value; then only the blinks property works.
- As you can observe above output images, each output image text changes from red to normal black color. So, in this way, the 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 the same as the above animation property value; then only the 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, the 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 the same as the above animation property value; then only the 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, the 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 besides that is the same as the above animation property value; then only the 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, the 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
We hope that this EDUCBA information on “CSS Blinking Text” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
