<div class="container">
    <div class="ripple-container">
        <div class="ripple"></div>
        <div class="ripple"></div>
        <div class="ripple"></div>
    </div>
</div>

<script type="module">
    import { animate, stagger } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    animate(
        ".ripple",
        {
            transform: ["scale(0)", "scale(1)"],
            opacity: [1, 0],
        },
        {
            duration: 2,
            repeat: Infinity,
            delay: stagger(0.5),
            ease: "easeOut",
        }
    )
</script>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ripple-container {
        position: relative;
        width: 100px;
        height: 100px;
    }

    .ripple {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        border: 5px solid #ff0088;
        will-change: transform, opacity;
        opacity: 0;
    }
</style>