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: