Wave

                        
<div id="wrap">
    <div class="divWave"></div>
</div>

                        
.divWave{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg"); background-repeat: repeat-x; background-position: 0px bottom; 
background-size: 1920px auto; overflow: hidden; opacity: 0.7; animation-name: wave; animation-duration: 50s; animation-iteration-count: infinite;
animation-timing-function: linear;}

@keyframes wave {
    0%{background-position: 0px bottom;}
    100%{background-position: 1920px bottom;}
}

                        
.divWave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg");
    background-repeat: repeat-x;
    background-position: 0px bottom;
    background-size: 1920px auto;
    overflow: hidden;
    opacity: 0.7;
    -webkit-animation-name: wave;
            animation-name: wave;
    -webkit-animation-duration: 50s;
            animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

@-webkit-keyframes wave {
    0% {
        background-position: 0px bottom;
    }
    100% {
        background-position: 1920px bottom;
    }
}

@keyframes wave {
    0% {
        background-position: 0px bottom;
    }
    100% {
        background-position: 1920px bottom;
    }
}

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.