body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.equalizer {
	width: 10em;
	height: 10em;
	display: flex;
	justify-content: space-between;
}

.equalizer span {
	width: 1.5em;
	background: linear-gradient(red, yellow, green);
	animation: up-and-down 2s linear infinite calc(-1 * 0.4s * var(--n));
}

.equalizer span:nth-child(1) { --n: 1; }
.equalizer span:nth-child(2) { --n: 2; }
.equalizer span:nth-child(3) { --n: 3; }
.equalizer span:nth-child(4) { --n: 4; }
.equalizer span:nth-child(5) { --n: 5; }

@keyframes up-and-down{
	0%, 100% { clip-path: inset(27% 0 0 0); }
	10% { clip-path: inset(17% 0 0 0); }
	20% { clip-path: inset(55% 0 0 0); }
	30% { clip-path: inset(30% 0 0 0); }
	40% { clip-path: inset(13% 0 0 0); }
	50% { clip-path: inset(38% 0 0 0); }
	60% { clip-path: inset(80% 0 0 0); }
	70% { clip-path: inset(21% 0 0 0); }
	80% { clip-path: inset(0% 0 0 0); }
	90% { clip-path: inset(36% 0 0 0); }
}