Ping animation with minimal CSS
I have seen this ping animation on various websites where a circle expands and then contracts to its original size. It’s a pretty neat animation that represents a ping or a notification.
I thought of creating a similar animation using minimal CSS and here’s how it turned out.
It’s actually pretty simple to implement it. First of all, we need to define a “dot” element which will be the static one and a “heartbeat” element which will be animated behind the dot.
Here’s the HTML for the same.
<div class="container">
<span class="heartbeat"></span>
<span class="dot"></span>
</div>
Now, let’s define the CSS for the same.
.dot {
position: relative;
width: fit-content;
background: linear-gradient(135deg, #7932f6, #805ad5 48%, #342662);
border-radius: 40px;
width: 3.75rem;
height: 3.75rem;
}
.heartbeat {
position: absolute;
width: fit-content;
background-color: #7932f6;
border-radius: 40px;
width: 3.75rem;
height: 3.75rem;
opacity: 0.75;
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
As you can tell, the dot element will have its position set to relative and the heartbeat element will have its position set to absolute. This is because we want the heartbeat element to be positioned relative to the dot element.
Next, we need to define the animation for the heartbeat element. We will use the ping animation which will scale the element to 2 times its original size and then fade out for an infinite number of times. We need to keep its opacity to 0.75 so that it doesn’t look too bright.
And the cubic-bezier function in the animation will define the animation curve. You can play around with it to get the desired effect.
You can change the size of the dot and the heartbeat by changing the width and height of the elements. Make sure to keep the width and height of the heartbeat element same as that of the dot element.
Putting it all together, here’s the CodePen for the same.
See the Pen Create and download a text file by Amit Merchant (@amit_merchant) on CodePen.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
