CSS Interactive Pulse Animation/Effect

August 22nd, 2023


While working on a “tap to interact” overlay, I needed a pulsing tap animation and ended up with this quick snippet.

It uses CSS Animation keyframes to “pulse” the scale of the object in a slightly offset pattern.

Change the selector for .overlay svg to just a class and apply it to whatever element you want to pulse.

.overlay svg {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.90);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.90);
    }
}
Example:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *