Pulse Animation in Text using HTML & CSS

Pulse Text Animation using 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.

Pulse Text Animation using HTML and CSS
Pulse Text Animation using HTML and CSS

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Live Preview Of Pulse Text Animation using CSS:-

I hope you have got the idea of the project

Code byharshh9
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
Pulse Text CSS  Table

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.

Create Simple Portfolio Website Using Html Css (Portfolio Website Source Code)

Pulse Text Css Code:-

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

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

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.

Final Output Pulse Text Using CSS:-

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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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

Which code editor do you use for Pulse Text Animation?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes, Pulse Text is responsive.

Do you use any external links to create this project?

No, we use pure css code for Pulse Text.

Leave a Reply