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: