Wave divider

<div class="wave">
    <img src="<?php bloginfo('template_url'); ?>/images/wave.svg" alt="" width="100%" style="
    position: absolute; bottom: 0;">
</div>

.wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    height: 300px;
}	
.wave:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/wave.svg) repeat-x;
    background-size: cover;
    background-position: -1000px 0;
    opacity: .2;
    animation: waveOne 60s linear infinite; 
}
@keyframes waveOne {
    50%{
        background-position: 0 0;
    }
}
.wave:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/wave.svg) repeat-x;
    background-size: cover;
    background-position: 2732px 0;
    opacity: .3;
    animation: waveOne 120s linear infinite; 
}