Pure CSS Wave Animation
May 5, 2021•243 words
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