← All elements
<div class="wd"><i></i><i></i><i></i></div>About this animation
Concentric rings expand from a point and fade, repeating like a drop landing on still water.
How it works
Three ring elements share a keyframe that grows them from 12px to 140px while fading out, with delays one second apart, so a new ring appears as the last fades. A small dot in the centre is the drop.
Ways to customise it
- Change the ring colour.
- Increase 140px for wider ripples.
- Add a fourth ring with another delay.
Good to know
It animates width and height, which is fine for a small decorative element. Reduced motion shows static rings.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.