anim.css

body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #724fff;
		}
		
		.bubbles li{
			position: absolute;;
			list-style: none;
			display: block;
			background: rgba(255,255,255,.2);
			animation: animate 20s linear infinite;
			bottom: -150px;

		}
		.bubbles li:nth-child(1){
			left: 48%;
			width: 10px;
			height: 10px;
			animation-delay: 0s;
			border-radius: 50%;

		}
		.bubbles li:nth-child(2){
			left: 37%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(3){
			left: 35%;
			width: 15px;
			height: 15px;
			animation-delay: 6s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(4){
			left: 62%;
			width: 30px;
			height: 30px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(5){
			left: 59%;
			width: 25px;
			height: 25px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(6){
			left: 20%;
			width: 20px;
			height: 20px;
			animation-delay: 15s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(7){
			left: 55%;
			width: 2px;
			height: 2px;
			animation-delay: 2s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(8){
			left: 65%;
			width: 10px;
			height: 10px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(9){
			left: 25%;
			width:25px;
			height: 25px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(10){
			left: 82%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(11){
			left: 53%;
			width: 10px;
			height: 10px;
			animation-delay: 0s;
			border-radius: 50%;

		}
		.bubbles li:nth-child(12){
			left: 66%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(13){
			left: 35%;
			width: 15px;
			height: 15px;
			animation-delay: 6s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(14){
			left: 77%;
			width: 30px;
			height: 30px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(15){
			left: 21%;
			width: 25px;
			height: 25px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(16){
			left: 61%;
			width: 20px;
			height: 20px;
			animation-delay: 15s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(17){
			left: 695%;
			width: 15px;
			height: 15px;
			animation-delay: 2s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(18){
			left: 3%;
			width: 10px;
			height: 10px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(19){
			left: 15%;
			width:25px;
			height: 25px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(20){
			left: 43%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(21){
			left: 6%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(22){
			left: 36%;
			width:18px;
			height: 18px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(23){
			left: 1%;
			width:21px;
			height: 21px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(24){
			left: 46%;
			width:35px;
			height: 35px;
			animation-delay: 7s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(25){
			left: 99%;
			width:33px;
			height: 33px;
			animation-delay: 1s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(26){
			left: 79%;
			width:13px;
			height: 13px;
			animation-delay: 10s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(27){
			left: 29%;
			width:27px;
			height: 27px;
			animation-delay: 6s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(28){
			left: 87%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(29){
			left: 96%;
			width:22px;
			height: 22px;
			animation-delay: 12s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(30){
			left: 41%;
			width:17px;
			height: 17px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		@keyframes animate{
			0%{
				transform: translateY(0) rotate(0deg);
				opacity: 1;
				border-radius: 50%;
			}
			100%{
				transform: translateY(-1000px) rotate(720deg);
				opacity: 0;
				border-radius: 50%;
			}
		}
		.bubbles_top li{
			position: absolute;;
			list-style: none;
			display: block;
			background: rgba(255,255,255,.2);
			animation: animates 20s linear infinite;
			top: -150px;

		}
		.bubbles_top li:nth-child(1){
			left: 45%;
			width: 10px;
			height: 10px;
			animation-delay: 0s;
			border-radius: 50%;

		}
		.bubbles_top li:nth-child(2){
			left: 10%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(3){
			left: 35%;
			width: 15px;
			height: 15px;
			animation-delay: 6s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(4){
			left: 50%;
			width: 30px;
			height: 30px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(5){
			left: 75%;
			width: 25px;
			height: 25px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(6){
			left: 23%;
			width: 20px;
			height: 20px;
			animation-delay: 15s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(7){
			left: 55%;
			width: 10px;
			height: 10px;
			animation-delay: 2s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(8){
			left: 91%;
			width: 25px;
			height: 25px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(9){
			left: 25%;
			width:25px;
			height: 25px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(10){
			left: 85%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(11){
			left: 5%;
			width: 10px;
			height: 10px;
			animation-delay: 0s;
			border-radius: 50%;

		}
		.bubbles_top li:nth-child(12){
			left: 67%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(13){
			left: 35%;
			width: 15px;
			height: 15px;
			animation-delay: 6s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(14){
			left: 71%;
			width: 30px;
			height: 30px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(15){
			left: 21%;
			width: 25px;
			height: 25px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(16){
			left: 61%;
			width: 20px;
			height: 20px;
			animation-delay: 15s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(17){
			left: 80%;
			width: 22px;
			height: 22px;
			animation-delay: 2s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(18){
			left: 40%;
			width: 15px;
			height: 15px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(19){
			left:5%;
			width:25px;
			height: 25px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(20){
			left: 17%;
			width:35px;
			height: 35px;
			animation-delay: 0s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(21){
			left: 100%;
			width:15px;
			height: 15px;
			animation-delay: 3s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(22){
			left: 9%;
			width:25px;
			height: 25px;
			animation-delay: 9s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(23){
			left: 93%;
			width:35px;
			height: 35px;
			animation-delay: 1s;
			border-radius: 50%;
		}
		.bubbles li:nth-child(24){
			left: 31%;
			width:45px;
			height: 45px;
			animation-delay: 8s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(25){
			left: 97%;
			width:5px;
			height: 5px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(26){
			left: 12%;
			width:35px;
			height: 35px;
			animation-delay: 16s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(27){
			left: 89%;
			width:25px;
			height: 25px;
			animation-delay: 7s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(28){
			left: 31%;
			width:45px;
			height: 45px;
			animation-delay: 5s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(29){
			left: 56%;
			width:35px;
			height: 35px;
			animation-delay: 1s;
			border-radius: 50%;
		}
		.bubbles_top li:nth-child(30){
			left: 85%;
			width:35px;
			height: 35px;
			animation-delay: 13s;
			border-radius: 50%;
		}
		@keyframes animates{
			0%{
				transform: translateY(0) rotate(0deg);
				opacity: 1;
				border-radius: 50%;
			}
			100%{
				transform: translateY(1000px) rotate(720deg);
				opacity: 0;
				border-radius: 50%;
			}
		}