EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Blinking Text

CSS Blinking Text

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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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.
Note: Animation property blinker name and @keyframes blinker name is always the same to work in the blinking feature.

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:

css blinking text 1

css blinking text 2

css blinking text 3

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:

span text

css blinking text 5

css blinking text 6

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:

HeaderTextBlink.html

css blinking text 8

css blinking text 9

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:

LiveButtonDemo.css

css blinking text 11

LiveButtonDemo.css

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 –

  1. CSS Text Underline
  2. CSS Box Sizing
  3. CSS Lists
  4. CSS Gradient Generator
0 Shares
Share
Tweet
Share
quiz