Pulse Text Animation using CSS

Hello Coder! Today we are Going to Create Pulse Text Animation using HTML and CSS. Pulse Text Animation is like Text Blink in Every Second with animation so today we create this same Animation using Only Html and Css.

Pulse Text Animation using CSS becomes a trend nowadays to grab the user's attention developers try to add some effects in the text so that the surf time increase and users would love to visit the site again. With that note, I welcome you all to Codewithrandom with this fresh blog discussion about the text effect called pulse animation. Pulse is like the text will appear and disappear after some interval of time.

HTML Code for Pulse Animation:-

<h1 class="element"><center>Welcome to Codewithrandom</center></h1>

In this code, we have just defined a heading and aligned it in the center. Now let us style and add the most important part of this project the CSS script.

Pulse Text Css Code:-

.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;

}

@keyframes pulse {
  0% {
    color: orange;
  }
  50%{
    opacity: 0;
  }
  100% {
    color: orange;
  }
}

html,
body {
  background: red;
  height: 100%;
}

In this CSS Code, we have first defined the fixed width & height for the text and the number of seconds for appearing and disappearing. And then added a background color for the styling. Let us see the Final Output.

We have successfully created our Pulse Animation in Text using CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – harshh9