• Seo Expert
  • Khaali Paper

Blink Text Effect Using CSS3

Very simple way of making a text blinking effect using only HTML and CSS3. Blink Text Effect is used when you have to grab user attention very quickly for your Text on your website because the text is continuosly blinking. So in this tutorial we will show how to create blink text effect using CSS3.

Blink Text Effect Using CSS3

To Create Blinking Text Effect, it takes following steps:-

  1. Make a HTML file and define markup and styling.
  2. Copy the html code in html file.
  3. Copy the enter css line in to css file and both html and css file save and run your html page.
  • Html
  • Css
  • Complete Code
<p id="blinkText">This Is A Blinking Text Demo</p>
#blinkText
{
  animation: blink 1s infinite;  
}
@keyframes blink 
{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
<!DOCTYPE html>
<html>
<head>
<title>Blink Text Effect Using CSS3</title>
<style>
#blinkText
{
    animation: blink 1s infinite;  
}
@keyframes blink 
{  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
</style>
</head>
<body>
<p id="blinkText">This Is A Blinking Text Demo</p>
</body>
</html>

Text Animation CSS

In this step we create a sample para for blinking text effect and we use CSS3 animation and keyframes property to blink the text. Earlier versions of HTML and Internet browsers supported CSS3 animation.

You can customize this code further as per your requirement.