<div class ="wave">
	</div>
:root{
	--red:#cc3429;
	--yellow:#ffea29;
	--blue:#098ae3;
	}
	
body{
	display:flex;
	height:100vh;
	width:100%;
	align-items:center;
	justify-content:center;
	padding:0;
	margin:0;
	background:#02143c;
}

.wave{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
}

.wave span{
	background:var(--red);
	animation:wave 3s ease-in-out infinite;
	vertical-align:bottom;
}

@keyframes wave{
	30%,70%{
		background-color:#ff8c2f;
	}
	40%{
		transform:translateY(-50px) scaleY(2);
	}
}
let wave = document.querySelector(".wave");
	let i = 0;
	let num = 10;
	
	for (i; i < 20; i++){
		let span = document.createElement('span');
		span.style.height = `${num * 10}px`;
	    span.style.width = `${num * 2}px`;
		span.style.animationDelay = `${i / 5}s`;
		wave.append(span);
	}
	

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.