How to Make Text Blink in HTML: Easy Tutorial

PDF download Download Article
Create flashing or blinking text on any webpage with JavaScript & CSS animations
PDF download Download Article

If you were browsing the internet back in the 1990s, you know blinking text, titles, images, and whole webpages were ubiquitous! Since then, however, making elements blink has fallen out of favor due to accessibility issues , browser incompatibility, and general illegibility. While you were once able to use an HTML code like <blink> or <marquee> , those are now deprecated or in the process of being phased out on all current browsers including Google Chrome, Firefox, and Safari. This wikiHow article will show you how to use HTML along with a simple JavaScript code, or a slightly more complex CSS code, to add blinking text to your site!

Things You Should Know

  • There is no current way to make text blink using HTML alone that is recommended for modern web browsers. [1]
  • You can enter JavaScript functions in the same document as your HTML in the header.
  • To use CSS Animations, you will have to create a separate style sheet document and link to it to your HTML.
Method 1
Method 1 of 2:

Using JavaScript

PDF download Download Article
  1. As always, set up your HTML page with <html>, <head>, and <body> tags.
  2. In between the <head> and </head> tags of your HTML document, insert the following JavaScript code:
    • function blinktext() {
        var f = document.getElementById('announcement');
        setInterval(function() {
          f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
        }, 1000);
      }
    Advertisement
  3. The code above defined a function and named it "blinktext." In order to use this function in your HTML, change the <body> tag to <body onload="blinktext();">.
  4. This script only affects elements with the id "announcement." Place your blinking text inside any element and give it that id. For example, type <p id="announcement">Blinking text here.</p> or <div id="announcement">Blinking text here.</div>.
    • You can rename this anything you like. Just make sure to use the same word in the script and the element id.
  5. The number "1000" in the script sets the delay between blinks. This is in milliseconds, so a value of 1000 makes the text blink once per second. [2] Change this to a lower number to speed up the blinking, or a higher number to slow it down.
    • The actual delay probably won't match this value perfectly. It tends to be slightly shorter, but can take longer if your browser is busy with other requests.
    6. Advertisement
Method 2
Method 2 of 2:

Using CSS Animations

PDF download Download Article
  1. By creating a .css document in the same folder as your existing .html document, you will be able to easily connect it to your HTML code.
    • Firefox does not support inline CSS for Animations, which is what you need to use make your text blink! [3]
  2. Open your HTML document and, between the <head> </head> elements enter <link rel=”stylesheet” type=”text/css” href=”NAME.css”>
    • For a CSS document, rel and type will not change. It lets your browser know the format and purpose of the document you’re linking to – a text-based style sheet.
    • href is the name of your file and its .css extension. As long as it is in the same folder as the .html document those are the only two pieces of information needed to connect them.
  3. In the body of your HTML document, surround the text with <span class="announcement">Blinking text here</span> which defines anything within the span as an “announcement” class.
    • You can name your class anything you’d like, or use id instead of class , and of course change “Blinking text here” to the text of your choice.
  4. Back in the .css file, define your “announcement” class with .announcement{ animation-name: blinkingText; animation-duration: 1.2s; animation-iteration-count: infinite; }
    • animation-name can be anything you choose, and its actions will be defined separately within the CSS file.
    • animation-duration defines how long the animation takes to complete – if it is not specified, no animation will occur. In the above example, the sequence will take 1.2 seconds, but you can test different times for faster or slower blinking.
    • animation-iteration-count can either be set to a number – entering 4 means the text would only flash four times on page load and then stop - or “infinite” meaning it will blink forever.
    • if you choose to use id instead of class you will replace .announcement with #announcement
  5. So far, the only thing the computer knows is that something will happen every 1.2 seconds for infinity. To create a working blinking text animation, you need to define blinkingText in your CSS document. Enter @keyframes blinkingText{ from {color: black;} to {color: transparent;} }
    • By going from black to translucent, the code appears to blink at the animation-interval you set.
    • You can add different stages using percentages. Instead of from {color: black;} to {color: transparent;} you could enter 0% {color: black;} 50% {color: red;} 100% {color: translucent;} to make the text flash from black to red to translucent.
    • Instead of using color names, you can match the background of your website using the hex code for the color, preceded by a #.
    6. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • CSS Animations provides you with many options for customization [4] without using JavaScript. By gradually transitioning between styles, you can create dynamic webpages that go far beyond blinking text.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      • As a precaution to prevent seizures, guidelines have been put in place that state that no element on a website can flash more than three times in a second. [5] For accessibility purposes, this is important to consider when deciding on the frequency of blinking text, or if you want to utilize it at all.
        Thanks
        Helpful 0 Not Helpful 0
      • Do not use the <blink> tag, the <marquee> tag, or the CSS text-decoration "blink" styling, which very few modern browsers support.
        Thanks
        Helpful 0 Not Helpful 0
      Advertisement

      You Might Also Like

      Code a Hyperlink with HTML: A Beginner's How-To Guide
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      Advertisement

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
      2. ↑ http://javascript.info/tutorial/settimeout-setinterval
      3. ↑ http://caniuse.com/#feat=css-animation
      4. ↑ https://www.w3schools.com/css/css3_animations.asp
      5. ↑ https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html#seizure-does-not-violate-resources-head

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 151,126 times.

      Is this article up to date?

      Advertisement