water svg anim

by jpeter06

HTML

<div class="banner">


<div class="fill">

            <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">

                <path fill="#04ACFF" id="waveShape"
                d="M300,200 V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7 V50 H300z"/>
            </svg>
         </div>
         </div>
         
         <!-- 
         d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"
         -->

CSS

.banner #waveShape {

        width:300px;
        height: 150px;
        fill: #04ACFF;
        animation:waveAction 1s linear infinite;
    }
    


    @keyframes waveAction {
        0% {
            transform: translate(-150px, 0) ;
        }
        100% {
            transform: translate(0, 0) ;
        }
    }