<svg>
	<circle class="bubble" cx="50" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="100" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="130" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="155" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="230" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="260" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="320" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="400" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="455" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="510" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
	<circle class="bubble" cx="600" cy="300" r="20" fill="rgba(173, 216, 230, 0.9)" />
</svg>

svg {
	background-color: #48879c;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 50%;
}
.bubble {
	animation: rise 2s infinite linear;
	animation-fill-mode: forwards;
	opacity: 0;
}
.bubble:nth-child(2) {
	animation-delay: 0.9s;
}
.bubble:nth-child(3) {
	animation-delay: 0.5s;
}
.bubble:nth-child(4) {
	animation-delay: 1.2s;
}
.bubble:nth-child(5) {
	animation-delay: 0;
}
.bubble:nth-child(6) {
	animation-delay: 0.7s;
}
.bubble:nth-child(7) {
	animation-delay: 0.3s;
}
.bubble:nth-child(8) {
	animation-delay: 0.9s;
}
.bubble:nth-child(9) {
	animation-delay: 1.5s;
}
.bubble:nth-child(10) {
	animation-delay: 0s;
}
.bubble:nth-child(11) {
	animation-delay: 0.8s;
}
@keyframes rise {
	0% {
		cy: 300;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		cy: 50;
		opacity: 0;
	}