How to create a pulse animation in CSS

In this tutorial, we are going to learn about creating a pulse effect animation in CSS.

Codepen demo

Here is our CSS pulse animation demo.

Here is our second demo which is CSS pulsing heart animation.

Pulse animation is mostly used to draw the attention of a user to your buttons.

Getting started

First, we need to create an html markup that contains two div tags where one is placed inside another.

<div class="center">
      <div class="circle pulse"></div>
 </div>

Css

Now, we need to style the circle and pulse classes.

.center {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

.circle {
  background:#FF66CC;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

This above code will create a circle with 35px of height and width the pulse class is responsible for running the pulse-animation for 2 seconds infinitely.

Inside the @keyframes at 0% we are setting the box-shadow opacity to 0.2 when the animation reaches the 100% we are spreading the box-shadow around the circle by 20px so that we can see pulse effect.

CSS pulsing heart animation

In pulsing heart animation, we need to scale the heart size at first, when the animation reaches the 100% we need to scale back to the initial size.

Let’s write code.

Html markup

This markup contains a div tag and and i tag with heart icon is added.

<div class="center">
    <i class="fa fa-heart heart"></i>
</div>

We are using font-awesome icons

Css styling

.heart {
  color: red;
  font-size: 50px;
  animation: heart-pulse 0.9s infinite ease-out;
}

@keyframes heart-pulse {
  0% {
    transform: scale(0); /* scaling to 0 */
  }
  50% {
    transform: scale(1.2); /* increasing the size */
  }
  70% {
    transform: scale(0.65); /* decreasing the size */
  }
  100% {
    transform: scale(0); /* seeting back to initial size */
  }
}

Find me on twitter @saigowthamr