Easy way to Create Blink text in HTML
Earlier, the <blink> tag was used to create blink text, but now blink tag is not supported in any browser. So, we are going to create blink text using CSS. In this article, we will see how to create blink text in HTML.
What is blink text
Blink text means the text is blinking when users enter the webpage and you can also change the text color while blinking. If you want users to see an important word first, you can create BlinkText. For example: If you have a restaurant website, if you put words like Offer, discount, or FREE in blink text, the user will see that word first. So you can liberally use blink text to attract the user.
How to create blink text in HTML.
<style type="text/css">
h1{
animation: blink_text 1s infinite; }
@keyframes blink_text{
50% {color: transparent;}
}
</style>
<h1>OFFER! OFFER!</h1>Live preview:
See the Pen
Blink text by Wonderdevelop (@wonderdevelop)
on CodePen.
Steps:
- Write the text you want to blink in <p>, <span>, <h1>-<h6> tags in HTML.
- Then you have to give the style to the created element. In the code above, I have written the text in the <H1> tag, So I have styled the h1 element.
- In whichever element you have given text, you have to use the CSS “animation” property and give 3 values which are animation name, duration, and iteration count. In the above code 1st value “blink-text” is the animation name, 2nd value “1s” value is the duration and the 3rd value “infinite” is the iteration count.
- You can give any name you want in the 1st value animation name and you will write CSS keyframes using this name. In 2nd value duration, “1s” means 1 second if you increase the value it will blink slowly. And the 3rd value is iteration count, which you can give how many times you want it to blink text, “infinity” means it will blink continuously. For example, if you give value 5 in iteration count, it will blink only 5 times
- 5. To create BlinkText using CSS you need to create keyframes. To create keyframes, you should give your “animation-name” using the keyword “@keyframes” as in the above code. Then add the parenthesis and write 50% inside it. And add another parenthesis give “Color: transparent” inside it.
Multi color Blinking text
h1{
animation: blink_text 1s 5; }
@keyframes blink_text{
0% {color: red;}
50% {color: transparent;}
100% {color: green}
}
</style>
<body >
<h1>WARNING!</h1>Live preview:
See the Pen
Untitled by Wonderdevelop (@wonderdevelop)
on CodePen.
If you want to display blink text in double color then add three frames 0%, 50%, and 100% to keyframes. Also give “Color: Transparent” for 50% frame as done in a single color blink. For the other two frames, you can give the two colors you want using the “color” property, as in the above code. If you want to add extra color, add 25% and 75% frames and add it color.
Conclusion
I hope you will learn how to create HTML BlinkText in this article
