画面に波紋が広がる様なアニメーション処理の実装

画面に波紋が広がるようなアニメーション処理を実装します。
説明、コードの下にデモで波紋が広がるのを確認できます。

document.addEventListener('DOMContentLoaded', () => { 
     function createRipple(x, y) {
        for (let i = 0; i < 3; i++) {
            const delay = i * 600; // Ensure each ripple starts with enough delay to avoid overlapping animations
            setTimeout(() => {
                const ripple = document.createElement('div');
                ripple.classList.add('ripple');
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                ripple.style.width = '0';
                ripple.style.height = '0';
                ripple.style.marginLeft = `-0px`;
                ripple.style.marginTop = `-0px`;

                const container = document.querySelector('.ripple-container');
                container.appendChild(ripple);

                // Set size after appending to trigger animation
                const size = Math.random() * 10 + 20; // Random size between 50 and 100px
                ripple.style.width = `${size}px`;
                ripple.style.height = `${size}px`;
                ripple.style.marginLeft = `-${size / 2}px`;
                ripple.style.marginTop = `-${size / 2}px`;

                // Remove element after animation ends
                ripple.addEventListener('animationend', () => {
                    ripple.remove();
                });
            }, delay); // Delay each ripple by 600ms
        }
    }

    function generateRandomRipples() {
        const container = document.querySelector('.ripple-container');
        const width = container.offsetWidth;
        const height = container.offsetHeight;

        setInterval(() => {
            const x = Math.random() * width;
            const y = Math.random() * height;
            createRipple(x, y);
        }, 1000); // Create a new ripple every 1 second
    }

    generateRandomRipples();
});

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

.ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	animation: ripple-animation 2s linear forwards;
	box-shadow: 0 0 0 0.1px #000; /* 初期のボーダーをbox-shadowで細く設定 */
}

@keyframes ripple-animation {
	0% {
		transform: scale(0);
		opacity: 1;
		box-shadow: 0 0 0 0.1px #000; /* 初期の線の太さを2pxに */
	}
	100% {
		transform: scale(10);
		opacity: 0;
		box-shadow: 0 0 0 0.05px #000; /* 広がるとともに線を細く設定 */
	}
}
.ripple-container {
	position: relative;
	width: 100%;
	height: 100vh;
}