Open In App

How to Create Blinking Text using CSS ?

Last Updated : 18 Jun, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

Blinking text effect also be known as the flashing text effect can be easily created using HTML and CSS @keyframes rule and the opacity property.

HTML Code: In this section, we will create a basic div element which will have some text inside it.




<!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>
</head>
<body>
  <div>
    <h2>Blink</h2>
  </div>
</body>
</html>


CSS Code: In this section, the designing of the text with the desired effect by using CSS @keyframes rule is implemented. The opacity property is set as shown below.




<style>
  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.5s linear infinite;
 
  
 @keyframes animate{
   0%{
     opacity: 0;
   }
   50%{
     opacity: 0.7;
   }
   100%{
     opacity: 0;
   }
 }
</style>


Final Code: It is the combination of the above two code sections.




<!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>
  
    <style>
        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.5s linear infinite;
        }
  
        @keyframes animate {
            0% {
                opacity: 0;
            }
  
            50% {
                opacity: 0.7;
            }
  
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
  
<body>
    <div>
        <h2>Blink</h2>
    </div>
</body>
  
</html>


Output:



Similar Reads

How to make a blinking text using jQuery ?
Given an HTML document and the task is to blink the certain text of an element using jQuery. There are few techniques to solve this problem which are discussed below: Approach 1: Select a particular element from the document. Toggle its visibility property from hidden to visible and vice-versa after a particular period of time. Example 1: This exam
2 min read
How to Add Blinking Background Color in JavaScript ?
In this article, we will learn how to create a blinking background color. Adding a blinking background color to an element can be an attention-grabbing visual effect that can be useful in various web applications. It can be achieved using JavaScript by toggling the background color of an element between two or more colors at regular intervals. Belo
3 min read
How to create long shadow of text without using text-shadow in HTML and CSS ?
Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi
2 min read
Text Animation with changing the color of the text using HTML and CSS
Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this
2 min read
How to Style the Text using text-decoration Property in CSS ?
The text-decoration property in CSS is used to style the decoration of text, such as underlining, overlining, line-through, and blink effects. It is a versatile property that can enhance the visual appearance of text. Syntax/* Example of using the text-decoration property */ .element { text-decoration: [value]; }The text-decoration Property ValuesT
1 min read
How Create a Text Box Where User Can't Type Inside the Text Box ?
To create a text box where the user can't type inside the text box, we have different approaches. In this article, we are going to learn how to create a text box where the user can't type inside the text box in JavaScript. Below are the approaches to creating a text box where the user can't type inside the text box: Table of Content Using Readonly
3 min read
How to Create a Text input with helper text in react-native ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
3 min read
How to Create a Cutout Text using HTML and CSS ?
Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an element’s background with the element’s parent. The CSS mix-blend-mode property is required to do that. Divid
3 min read
How to Create Liquid Filling Effect on Text using HTML and CSS ?
The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.The basic styling of the text can be done differently that totally depends on you how you want your te
3 min read
How to Create Loading Blur Text Animation Effect using HTML and CSS ?
The blur text animation is known as the Smoky effect and it is used to give our text a blurry animation. The text blurs linearly in one direction and then reappears. Approach: The approach of this article is quite simple. We are animating the blur effect using the blur() function. Then we are using n-th child property to apply the animation delay.
3 min read