CSSのアニメーションが絶対から相対に変更されました

Question

このwaveアニメーション「https://codepen.io/tedmcdo/pen/PqxKXg」が見つかりました。私のページのheaderimgに使用したいのですが、問題はアニメーションが絶対値用に書かれていますが、アニメーションはページの上にとどまるべきであるため、相対的な位置になります。

私は相対的に位置型に変更しようとしていますが、私はそれを行うが、私はアニメーションを破る、誰も私を助けることができる場合、私は幸せ^^

だろうが、あなたの時間をありがとうございました。相対DIV（又は他の容器）にそれを入れ

html, body { height: 100%; } 
body { 
    background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, rgba(254,208,149,1) 100%); 
    overflow: hidden; 
} 

.ocean { 
    height: 5%; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background: #015871; 
} 

.wave { 
    background: url(http://tedmcdo.com/labs/wave.svg) repeat-x; 
    position: absolute; 
    top: -198px; 
    width: 6400px; 
    height: 198px; 
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; 
    transform: translate3d(0, 0, 0); 
} 

.wave:nth-of-type(2) { 
    top: -175px; 
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; 
    opacity: 1; 
} 

@keyframes wave { 
    0% { 
    margin-left: 0; 
    } 
    100% { 
    margin-left: -1600px; 
    } 
} 

@keyframes swell { 
    0%, 100% { 
    transform: translate3d(0,-25px,0); 
    } 
    50% { 
    transform: translate3d(0,5px,0); 
    } 
} 

Answer 1

あまりにもわからない：

...need a relative position since the animation should stay on top of the page. 

...しかし、私は話を戻そう。

.ocean { 
    height: 5%; /* as above, adjust to %, px, (r)em's to your liking */ 
    bottom: 0; 
} 

.wave { 
    bottom: 0; /* change top to bottom */ 
} 

.wave:nth-of-type(2) { 
    bottom: 0; /* change top to bottom */ 
} 

Answer 2

、及び.ocean相対容器に絶対になります。ここで

は、CSSです。それはあなたの問題を解決するかもしれません。あなたはこれで何を意味するか

<div style="position: relative"> 
    <div class="ocean" style="position: absolute"></div> 
</div> 

Answer 3

は君たち、

ありがとうのにあなたが他のCSSの一部を調整する必要があるかもしれCSS

.oceanContainer { 
    position: relative; 
    height: 100% /* you can play around with this for your header */ 
} 

との相対位置

<div class="oceanContainer"> 
    <div class="ocean"> 
     <div class="wave"></div> 
     <div class="wave"></div> 
    </div> 
</div> 

で含むdiv要素を追加します。

あなたの助けを借りて私はこれを遠くに持っています：https://codepen.io/anon/pen/GEXvYX そしてそれは素晴らしい作品です！

しかし、私はもうちょっと立ち往生しました^^ 波の割合を損なうことなくスマートフォンのためにどのようにスケールするのですか？

ここにCSS：

.the-body { 
    height: 300px; 
    width:200px; 
} 

.wave-conatainer { 
    height: 194px; 
    width: 100%; 
    bottom: 0; 
    position:absolute; 
    padding-top: 15px; 
    padding-bottom: 80px; 
    overflow: hidden; 
} 

.ocean { 
    height: 91px; 
    width: 100%; 
    position:absolute; 
    bottom: 0; 
    background-color: #015871; 
} 

.wave { 
    height: 100%; 
    width: 3000px; 
    position:absolute; 
    background: url(http://tedmcdo.com/labs/wave.svg) repeat-x; 
    animation: wave 32s cubic-bezier(0.53, 0.63,0.45, 0.36) infinite; 
    transform: translate3d(0, 0, 0); 
    opacity: 0.8; 
} 

.wave:nth-of-type(2) { 
    animation: wave 32s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 16s ease -1.25s infinite; 
    opacity: 0.8; 
} 

@keyframes wave { 
    0% { 
    margin-left: 0; 
    } 
    100% { 
    margin-left: -1600px; 
    } 
} 

@keyframes swell { 
    0%, 100% { 
    transform: translate3d(0,-15px,0); 
    } 
    50% { 
    transform: translate3d(0,10px,0); 
    } 
}