How to create Blinking Text using CSS

What is Blinking Text?

Blinking text is the text which generally flashes on the screen or which changes the color within a particular time interval. So, if the color changes quickly, it looks repetitive after some time, and it seems to be blinking. Blinking text is used to enhance the look of normal text, and it is used to make attractive web pages. We can blink the text by various techniques like we can change the color of the text frequently or we can change the opacity of the text. So the change in the display of the text makes it blinking text, and as compared to normal text, users will focus more on the blinking text.

Blinking text can be achieved by using proper CSS keyframes. We will provide some of the examples of blinking text:

Example1: Blinking text example by changing the opacity of the text.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
	"width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
	<h2>Javatpoint - Welcome To Javatpoint</h2>
</div>
</body>
</html>

CSS code:

body{
margin: 0;
padding: 0;
}

div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

h2{
font-size: 5em;
font-family: serif;
color:#008000;
text-align: center;
animation: animate 1.8s linear infinite;
}

@keyframes animate{
0%{
	opacity: 0;
}
50%{
	opacity: 0.6;
}
100%{
	opacity: 0;
}
}

Output:

Explanation:

In the above HTML code, we have first included the CSS file using a link tag to add the external CSS to our HTML code. Then we took one div tag in which we created one h2 tag and wrote some lines in that h2 tag.

Now in the CSS file, we set the basic margin and padding and the div tag into the center of the page. Now we set the animation for the h2 tag for 1.8sec, and the type of animation is linear, and it will repeat itself infinite times.

Now we set some keyframe rules for this animation, like if the animation starts, then the opacity of the text will be 0% which means text will not be displayed.

If animation is at 50%, then opacity will be at 0.6, and if animation is at 100%, then opacity will be set again to 0. The transition of the opacity will be so smooth, so it looks that the given text is blinking.

Example2:

We will put the same animation for multiple tags where blink text will change its color with time.

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="style.css">
<title>Blinking Text</title>
</head>
<body>
<h2>This page will display the blinking text of multiple animation at a same time</h2>
<p class="a1">
	Hello everyone this is paragraph one from javatpoint and this paragraph will have different animation from the paragraph written below this.If you try to help others, God will help you surely.If you play sports, you fail sometimes, and it teaches you keep going.
<p class="a2">
	Hello guys, This is paragraph two from the same page . The text in this paragraph is also changing and you will enjoy this blinking text code. This website is javatpoint where you will find every topic related to computer science as well as generic topics also.
</p>
</body>
</html>

CSS code:

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:

In the above HTML code, we have first imported the CSS file to add the styling to our HTML code. Then we created two paragraphs with different class names and wrote down some text in each paragraph.

Now in the CSS part for each paragraph, we set the animation for 1.5 seconds, and in the keyframes, we define some rules.

If animation is at 0%, then the color of the text will be red. If the animation is at 47%, then the color will be black. If animation is at 62% and at 97%, then it will be transparent, .which will be invisible in the white background. If the animation is at 100%, then it will be again in black. So, changing the color of the text so frequently makes the text the blinking text.

Next TopicCSS Pricing Table

← prev next →