Performant Pulse Animation in CSS!

Hey fellow creators

You'd like to add a button with a pulse animation to your app? You can learn how to do it in CSS in less than a minute!

1. Create a button

This is a really simple step, but create a button in your HTML file:

<button>Go</button>

 

2. Let's style the button

Center the button as well as the text inside it, and make it a circle:

body{
    font-family: Arial, Helvetica, sans-serif;
    background: #333;
}

button{
    position: absolute; /* centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; /* centering the content */
    justify-content: center;
    align-items: center;
    width: 100px; 
    height: 100px;
    border-radius: 50%; /* make it a circle */
    font-size: 20px;
    border: none;
       cursor: pointer;
}

 

3. Create the pseudo-element.

Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant "transform" and "opacity" properties.

button::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;  /* behind the parent */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f1f1f1;
    top: 0;
    left: 0;
    animation: pulse 1.4s infinite ease-out;  /* animation configuration */
}

 
Create the keyframe:

@keyframes pulse {
    to {
        transform: scale(1.4);
        opacity: 0;
    }
}

 

And, there you go, the pseudo element will expand and hide at the time, thus creating what we want, with good performance (no repaint). 🔥

 
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.