Design AtlasAnimate a plain-bordered circle's transform: scale and opacity downward together, and that's one ripple. As it grows, the border-width stays fixed while the circle itself expands, so the ring reads as thinning out — the same fading you'd expect from a real ripple losing energy as it spreads.
Stack several identical circles and give each a different animation-delay, and new ripples appear to be born continuously, like drops falling into a pond. Anchoring a single glowing dot at the centre adds the sense that "a signal is originating here."
The ripple effect in the interaction category fires once at the point you click, as feedback; a ripple background is decorative and loops automatically on its own, independent of any user input — that's the distinction.
When to use
Use behind a "live" or "broadcasting now" indicator, or to signal an active real-time connection. Keep it as a standalone background element — overlapping content gets distracting.