Kundan.dev
Published on
•

Html

How to Blink the Text in HTML? - Working methods

Authors

HTML Blinking text can be a powerful tool to capture your audience's attention and emphasize important information on your HTML pages.

But attention! blinking of text on web pages can create accessibility issues for someone with visual impairment. So, it must not be overused.

In this blog post, we will learn how to blink text using HTML and CSS. We'll cover best practices, accessibility considerations, and tips for achieving cross-browser compatibility.

HTML Blinking text

Earlier, folks on the internet used <blink> tags to make text blink. It was very common during the early 2000s.

But, with change and advancement, the <blink> tag was deprecated due to accessibility and other issues like creating additional distractions to users.

The <blink> is a deprecated HTML tag. It should not be used now in HTML5.

But, Text blinking is a powerful way to grab users' attention. We can still create the same blinking animations using HTML, CSS and JavaScript.

It can be done in multiple ways. Here are the two most common ways to achieve the text blink effect.

1. Blink HTML text using CSS

We can make this blinking text animation using just HTML and CSS without using <blink> tag.

For this, we need to provide our HTML text with an identifier (maybe, a class) and then apply CSS properties to it.

We will use animation and @keyframe to animation and add special effects to the HTML tag.

<p class="blink">This text will blink.</p>

Add the above HTML code to your .html file.

Here is the CSS code to add HTML blinking text animation to the CSS. Add the below code to your .css file linked with your HTML file.

.blink {
  animation: blink__X 1.5s linear infinite;
}

@keyframes blink__X {
  50% {
    opacity: 0;
  }
}

Here, blink__X is just a name value. Feel free to change it. But make sure, the name after @keyframes must be the same.

2. Blink HTML text using JavaScript

You can do the same blinking effect using JavaScript.

Add the below HTML code to your .html file.

<p id="blink">This text will blink.</p>

And, here is our JavaScript. Add this to your .js file linked with the above HTML file.

let blink = document.getElementById('blink');

setInterval(() => {
  blink.style.opacity = blink.style.opacity == 0 ? 1 : 0
}, 500);

Feel free to change setInterval values from 500 milliseconds or 0.5 seconds to other values according to your need.

And thats it!

-------------

→ Additionally, you can add the above JavaScript code between <script>...</script> tag in your HTML file to run JavaScript inside your HTML file.

In this case, the above <p id="blink">...</p> tag and the below <script> tag will be in the same HTML file inside <body>...</body> tag.

<script>
  let blink = document.getElementById('blink');

  setInterval(() => {
    blink.style.opacity = blink.style.opacity == 0 ? 1 : 0
  }, 500);
</script>

Final note:

You have reached the end.

In this guide, you learnt about why <blink> doesn't work?: because it is deprecated and it shouldn't be used anymore.

We have discussed various techniques to blink text using HTML and CSS, including CSS animation, transitions, and JavaScript alternatives.

As mentioned earlier, Text blinking can cause accessibility issues. So, try to avoid it or moderate the values to make it less overwhelming or distracting to your users.

Happy coding!

Share: