CSS3 애니메이션 버블 배경

Question

이 튜토리얼을 내가 성취하려는 것에 사용할 수있는 것으로 변경하는 데 문제가 있습니다. http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

구름을 거품으로 바꾸고 왼쪽에서 오른쪽으로 가기보다는 맨 아래에서 맨 위로 가져오고 싶습니다.

누구도 날이 내가 단지 그것을 거품을 이동하고

고정 내 BG를 마칠 거품과 함께 BG 구배를 이동하는 이유를 정확하게 도움이 될 수 있습니다 그것은 비록 배경에 아주 이상한 일을하고있다

... 여기 내 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;} 
      } 

그리고 내 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> 

Answer 1

#clouds 거품이 이동으로 붕괴된다. 그것은 사슬에서 몸을 무너 뜨립니다. 따라서 이상한 배경의 버그가 반복되는 배경이됩니다.

HTML, 몸과 #clouds 100 % 높이를 추가 여기에 문제를

를 해결하는 데모입니다 : http://jsfiddle.net/Fmy7F/1/