CSS Pulse Animation
In this article I will show you how to create a nice pulsing effect. I will also cover the use cases and also how to make it more performant.
Let’s start!
HTML element
First, we need one HTML element. Let’s give it a class .pulse. It can be an empty div as we don’t need any content here, at least not for this basic example.
<div class="pulse"></div>
Circle
Now, we need some styles to make this element look like a circle.
.pulse {
background: rgb(222, 84, 72);
border-radius: 50%;
height: 30px;
width: 30px;
}
Animation
Next, we will create this animation utilizing box-shadow and transform properties.
The box-shadow property adds a shadow around elements. The transform property lets you rotate, scale, skew, or translate an element.
.pulse {
background: rgb(222, 84, 72);
border-radius: 50%;
height: 30px;
width: 30px;
box-shadow: 0 0 0 0 rgba(222, 84, 72, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(222, 84, 72, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px rgba(222, 84, 72, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(222, 84, 72, 0);
}
}
This will already work, but let’s make it a more real-life example by making it a bit more dynamic.
For this purpose, I will rewrite the previous demo and use CSS variables to make it reusable. I will create 4 elements with different colors.
Let’s see what it looks like:
This is it, but I’ll provide one more example for you. Let’s create a “play” button you can use to create a CTA if you have some videos on your website.
In this example, we’ll need a bit more HTML and CSS, but I promise it’ll be fun. 🙂
Further reading: CSS Pulse Animation
