You are currently viewing Pulse Animation in Text using HTML & CSS

Pulse Animation in Text using HTML & CSS

Animation in the text has become 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 as pulse animation. Pulse is like the text will appear and disappear after some interval of time.

Pulse Animation in Text using HTML & CSS

I hope you have got the idea of the project

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)

CSS Code for Pulse Animation

.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.

Final Output Pulse Animation in Text using HTML & CSS


We have Successfully created our Pulse Animation in Text using HTML5 & CSS3 | Text Pulse Animation 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 code with random 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

Leave a Reply