CSS3 Animated Bubble Background
===

I am having an issue with changing this Tutorial into something that i can use for what i am trying to accomplish. http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

I would like to change the clouds to bubbles and have it come from the bottom to the top instead of left to right. 

It is doing something VERY strange to the background though... can anyone help me pinpoint why it is moving the BG gradient along with the bubbles i only want it to move the bubbles and leave my BG stationary 

Here is my CSS

				body {
					/*To hide the horizontal scroller appearing during the animation*/
					overflow: hidden;
					background-image: linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
				background-image: -o-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
				background-image: -moz-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
				background-image: -webkit-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);
				background-image: -ms-linear-gradient(bottom, #14C3F4 21%, #FCFCFC 90%);

				background-image: -webkit-gradient(
				  linear,
				  left bottom,
				  left top,
				  color-stop(0.21, #14C3F4),
				  color-stop(0.9, #FCFCFC));
				}

				#clouds{
					padding: 100px 0;
				/*	background: #c9dbe9;
					background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
					background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
					background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);*/
				}

				/*Time to finalise the cloud shape*/
				.cloud {
					width: 60px; height: 60px;
					background: #fff;
					
					border-radius: 200px;
					-moz-border-radius: 200px;
					-webkit-border-radius: 200px;
					
					position: relative; 
				}



				/*Time to animate*/
				.x1 {
					-webkit-animation: moveclouds 15s linear infinite;
					-moz-animation: moveclouds 15s linear infinite;
					-o-animation: moveclouds 15s linear infinite;
				}

				/*variable speed, opacity, and position of clouds for realistic effect*/
				.x2 {
					left: 200px;
					
					-webkit-transform: scale(0.6);
					-moz-transform: scale(0.6);
					transform: scale(0.6);
					opacity: 0.6; /*opacity proportional to the size*/
					
					/*Speed will also be proportional to the size and opacity*/
					/*More the speed. Less the time in 's' = seconds*/
					-webkit-animation: moveclouds 25s linear infinite;
					-moz-animation: moveclouds 25s linear infinite;
					-o-animation: moveclouds 25s linear infinite;
				}

				.x3 {
					left: 350px; 
					
					-webkit-transform: scale(0.8);
					-moz-transform: scale(0.8);
					transform: scale(0.8);
					opacity: 0.8; /*opacity proportional to the size*/
					
					-webkit-animation: moveclouds 20s linear infinite;
					-moz-animation: moveclouds 20s linear infinite;
					-o-animation: moveclouds 20s linear infinite;
				}

				.x4 {
					left: 470px; 
					
					-webkit-transform: scale(0.75);
					-moz-transform: scale(0.75);
					transform: scale(0.75);
					opacity: 0.75; /*opacity proportional to the size*/
					
					-webkit-animation: moveclouds 18s linear infinite;
					-moz-animation: moveclouds 18s linear infinite;
					-o-animation: moveclouds 18s linear infinite;
				}

				.x5 {
					left: 150px; 
					
					-webkit-transform: scale(0.8);
					-moz-transform: scale(0.8);
					transform: scale(0.8);
					opacity: 0.8; /*opacity proportional to the size*/
					
					-webkit-animation: moveclouds 20s linear infinite;
					-moz-animation: moveclouds 20s linear infinite;
					-o-animation: moveclouds 20s linear infinite;
				}

				@-webkit-keyframes moveclouds {
					0% {margin-bottom: 1000px;}
					100% {margin-bottom: -1000px;}
				}
				@-moz-keyframes moveclouds {
					0% {margin-bottom: 1000px;}
					100% {margin-bottom: -1000px;}
				}
				@-o-keyframes moveclouds {
					0% {margin-bottom: 1000px;}
					100% {margin-bottom: -1000px;}
				}
And my HTML

				<div id="clouds">
					<div class="cloud x1"></div>
					<!-- Time for multiple clouds to dance around -->
					<div class="cloud x2"></div>
					<div class="cloud x3"></div>
					<div class="cloud x4"></div>
					<div class="cloud x5"></div>
				</div>


