Author -  Sai gowtham

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

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY