How to Create Pulse Animation Using CSS (Code + Demo)

CSS Pulse Animation We see it in different places on web pages. Pulse Animation is used to make different UI elements interesting.

Here we will discuss how a Pulse Animation can be created using CSS. Here I have shared different types of designs such as Simple Pulse Animation CSS, button pulse animation, text pulse animation, image pulse animation, pulse animation on hover, etc.

Here I will use only CSS and HTML. I have shared here the complete information of each design, source code, and live demo of everything.

Examples - 1 

Simple Pulse Animation CSS

This is a simple Pulse Animation design created by HTML and CSS only. This design is basically a basic example of Pulse Animation.

There is a small round point here that will continue to be the center of animation.

Simple Pulse Animation CSS


Hopefully, with the help of the demo button above, you know how it works. If you want you can download all the code using the button below.

But below I have given all the HTML CSS code. The code used for this CSS Pulse Animation effect is very simple so you will not have any difficulty understanding it.


The following code is the HTML code that helps to add the basic information of this pulsing animation. Here I have put together all the HTML codes that you can copy and paste into your HTML file.



<!DOCTYPE html>
<!--Simple Pulse Animation-->
<html lang="en">
<head>
    <!--CSS file-->
   <link rel="stylesheet" href="style.css">
   
</head>
<body>
    <div class="relative">
        <button></button>
        <div class="span"></div>
        <div class="span"></div>
    </div>
</body>
</html>

The following code is the CSS code that activates this pulsing animation. Copy these and paste them into your CSS file. Remember to rename your CSS file to 'style.css'.



.relative {
  position: relative;
  margin: 50vh auto;
  width: 60px;
}

.span {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 0;
  -webkit-animation: sploosh 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation-iteration-count: infinite;
}

.span:nth-child(2) {
  -webkit-animation-delay: .33s;
  -webkit-animation-duration: 2.2s;
}

button {
  border: 0;
  margin: 50vh auto;
  border-radius: 50%;
  display: block;
  width: 60px;
  height: 60px;
  background-color: rgba(71, 225, 141, 1);
  -webkit-animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(71, 225, 141, .7);
    background: rgba(71, 225, 141, .7);
  }
  80% {
    background: rgba(66, 166, 223, 0);
  }
  100% {
    box-shadow: 0 0 0 120px rgba(66, 166, 223, 0);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  3.3% {
    -webkit-transform: scale(1.1);
  }
  16.5% {
    -webkit-transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

Hopefully, you have been able to create a simple pulse animation design using the above code.


Examples - 2 

Button pulse animation CSS

Now you have to create button pulse animation using CSS. This means that this animation effect has been added to a button.

In this case, first, a button has been created and some basic animations have been added. Then pulse animation was added to it using CSS.

Button pulse animation CSS


First I created a button that added some color-changing animations. This means that the background color of the button will change under normal conditions. Then the pulse animation effect has been added.


I have added all the basic information using the following codes. Here only one line of HTML is used to create the button only.



<!DOCTYPE html>
<html lang="en">
<head>
    <!--CSS file-->
   <link rel="stylesheet" href="style.css">

</head>
<body>
  <button class="pulse-button">Auto-Pulse</button>
</body>
</html>

Now you have to add pulse animation to the button with the following CSS. Copy the following codes and add them to your CSS file.



html{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
body {
    background-color: #222222;
    align-self: center;
    text-align: center;
}

/* Button resets and style */
button {
    margin: 15px auto;
    font-family: "Montserrat";
    border-radius: 100px;
    padding: 15px 20px;
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    border: 0px solid #000;    
    }

/* Initiate Auto-Pulse animations */
button.pulse-button {
    animation: borderPulse 1000ms infinite ease-out,
               colorShift 10000ms infinite ease-in;
}

/* Declate color shifting animation */
@keyframes colorShift {
    0%, 100% {
            background: #0045e6;
    }
    33% {
        background: #fb3e3e;
    }
    66%{
        background: #0dcc00;
    }
}

/* Declare border pulse animation */
@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
  }
}

If for some reason the above codes do not work then you can take the help of the download button above.


Examples - 3 

Text pulse animation CSS

Now we will learn how to add pulse animation to text. Because in many places we use animation in the text. There are several ways to animate text. However, CSS text pulse animation is also used in many places.

It is made in a very simple way. Only a few lines of CSS have been used to create this text pulse animation.

Text pulse animation CSS


If you want to know how this CSS pulse animation works then you can see the demo above. Here you will find all the source code. First I added text using one-line HTML. Then designed here using CSS.

Three-second animation is used here. The text can be seen when the animation starts. In the middle, that is, for some time after 1.5 seconds, the optical of the text will be zero, so I will not be able to see the text.


All the information has been added to create a text pulse animation using the following HTML codes. Copy the codes below and add them to your HTML file.



<!DOCTYPE html>
<html lang="en">
<head>
    <!--CSS file-->
   <link rel="stylesheet" href="style.css">

</head>
<body>
    <h1 class="element">Some example text</h1>
</body>
</html>

Now is the time to implement this pulse animation with some amount of CSS. Copy these codes and add them to your CSS file.



html,
body {
  height: 100%;
  text-align: center;
  margin: 50px auto;
  font-family: sans-serif;
}

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

@keyframes pulse {
  0% {
    color: #0682f5;
  }
  50%{
    opacity: 0;
  }
  100% {
    color: #0682f5;
  }
}


Examples - 4 

Image pulse animation CSS

Now you know how to create image pulse animation using CSS. Above we have added this pulse animation in the text, in the button. Now I will add this simple pulse animation in a simple image.

There are many ways to make an image attractive. The hover effect is one of them. However, using this type of pulse animation you can make any image more attractive.

Image pulse animation CSS


Only CSS is used here to execute this CSS pulse animation image. From the demo above you can learn how it works.

Originally an image was added first which was made round. Then color animation is added around the image which makes the image more attractive.


The image required for this image pulse animation has been added using the following HTML codes. I have used only one line of code here.



<!DOCTYPE html>
<!--Button Pulse Animation-->
<html lang="en">
<head>
    <!--== Design by foolishdeveloper.com ==-->
    <!--CSS file-->
   <link rel="stylesheet" href="style.css">

</head>
<body>
   <div class="image-pulse">
      <img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg">
   </div>
</body>
</html>


The CSS below designed this image and then animated it using before and after.



body {
    display: grid;
    place-items: center;
    margin: 0;
    height: 100vh;
    background-color: #000;
  }
 
  .image-pulse {
    --pulse-width: 15px;
    --pulse-color: rgba(135, 200, 235, 0.5);
    position: relative;
  }
  .image-pulse img {
    position: relative;
    border-radius: 50%;
    z-index: 2;
    width: 200px;
    height: 200px;
  }
  .image-pulse::after, .image-pulse::before {
    content: " ";
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--pulse-color);
    border-width: var(--pulse-width);
    border-radius: 50%;
    z-index: 1;
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    transform: scale(0.7);
    animation: pulse 2s linear infinite;
  }
  .image-pulse::after {
    animation-delay: 1s;
  }
  .image-pulse:hover::after, .image-pulse:hover::before {
    animation: pulse 1s linear infinite,
              pulse-hover 5s linear infinite;
  }
  .image-pulse:hover::after {
    animation-delay: 0.5s;
  }
  @keyframes pulse {
    to {
      opacity: 0;
      transform: scale(1);
    }
  }
  @keyframes pulse-hover {
    0% {
      border-color: red;
    }
    25% {
      border-color: #80ff00;
    }
    50% {
      border-color: aqua;
    }
    75% {
      border-color: #8000ff;
    }
    100% {
      border-color: red;
    }
  }



Examples - 5 

CSS pulse animation on hover

We will know how to add pulse animation on the hover-in button. Above we saw a design where we added a pulse animation to the button. But it is a bit different. Here we do not see any animation in the normal state of the button. 

This pulse animation on the hover can be seen when you hover over the button. This means that when you click or hover over the button, we will see this pulse animation in both cases.

CSS pulse animation on hover


In the same way, I first created a button for this. Then I designed the button using CSS and added some normal color change effects to the button.

If you want to download all the source code, you can use the download button above.


All the information for creating a button using the following HTML code has been added.



<!DOCTYPE html>
<html lang="en">
<head>
    <!--CSS file-->
   <link rel="stylesheet" href="style.css">

</head>
<body>
    <button class="pulse-button-hover">Pulse on hover</button>
</body>
</html>

Now is the time to implement this CSS pulse animation by CSS. A bit more CSS has been used here. Because first the button has been designed then the normal color animation has been added. Then here CSS pulse animation on hover is added to the button here.



html{
    display: flex;
    align-items: center;
  justify-content: center;
    height: 100%;
}
body {
    background-color: #222222;
    align-self: center;
    text-align: center;
}

/* Button resets and style */
button {
    margin: 15px auto;
    border-radius: 100px;
    padding: 15px 20px;
    border: 0px solid #000;
    font-family: "Montserrat";
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;        
    }
 
/* Initiate color change for pulse-on-hover */
button.pulse-button-hover {
    animation: colorShift 10000ms infinite ease-in;
}

/* Continue animation and add shine on hover */
button:hover,
button:focus {
    animation: borderPulse 1000ms infinite ease-out,
            colorShift 10000ms infinite ease-in,
            hoverShine 200ms;
}

/* Declate color shifting animation */
@keyframes colorShift {
    0%, 100% {
            background: #0045e6;
    }
    33% {
        background: #fb3e3e;
    }
    66%{
        background: #0dcc00;
    }
}

/* Declare border pulse animation */
@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
  }
}

/* Declare shine on hover animation */
@keyframes hoverShine {
    0%{
        background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    }
    50%{
        background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
    }
    100%{
        background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
    }
}

Hopefully from this tutorial, you have got all kinds of CSS pulse animation design relationship ideas.

Here I have discussed with you how to create Simple Pulse Animation CSS, button pulse animation, text pulse animation, etc. If you like this article, you can definitely share it on your social media account.