Pure CSS Wave Animation

A simple wave animation for web pages

Demo


Source

HTML

<div class="wave-container">
  <div class="wave wave1"></div>
  <div class="wave wave2"></div>
  <div class="wave wave3"></div>
  <div class="wave wave4"></div>
</div>

CSS

.wave-container .wave{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100px;
    background:url('https://svgshare.com/i/Wzr.svg');
    background-size:990px 100px;
    background-repeat: repeat-x;
}

.wave-container .wave.wave1{
    animation:animate 30s linear infinite;
    z-index:1000;
    opacity:1;
    animation-delay:0s;
    bottom: 0;
}
.wave-container .wave.wave2{
    animation:animate2 15s linear infinite;
    z-index:999;
    opacity:0.5;
    animation-delay:-5s;
    bottom: 10px;
}
.wave-container .wave.wave3{
    animation:animate 30s linear infinite;
    z-index:998;
    opacity:0.2;
    animation-delay:-2s;
    bottom: 15px;

}
.wave-container .wave.wave4{
    animation:animate2 5s linear infinite;
    z-index:997;
    opacity:0.7;
    animation-delay:-5s;
    bottom: 20px;
}
@keyframes animate{
    0%{
        background-position-x: 0;
    }
    100%{
        background-position-x: 990px;
    }
}
@keyframes animate2{
    0%{
        background-position-x: 0;
    }
    100%{
        background-position-x: -990px;
    }
}

SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1280.000000pt" height="129.000000pt" viewBox="0 0 1280.000000 129.000000"
 preserveAspectRatio="">

<g transform="translate(0.000000,129.000000) scale(0.100000,-0.100000)"
fill="#0b1021" stroke="#0b1021">
<path d="M2615 1284 c-33 -2 -145 -8 -250 -14 -807 -45 -1633 -187 -2272 -391
l-93 -30 0 -424 0 -425 6400 0 6400 0 0 420 c0 231 -3 420 -6 420 -4 0 -63
-18 -133 -41 -394 -126 -972 -247 -1506 -313 -510 -64 -802 -81 -1410 -81
-644 0 -1001 21 -1585 96 -591 75 -1050 165 -1775 349 -953 241 -1682 360
-2590 421 -154 10 -1057 20 -1180 13z"/>
</g>
</svg>

Downloadable link: SVG Share