Best Css wave animation(Easy to make)

Animation is very important part of any website in 2020 because it improves user experience and makes it visually appealing. So considering this importance , here’s the list of top css wave animation :
Css wave animation (by Jelena Jovanovic ) :
See the Pen CSS Wave Animation with a .png by Jelena Jovanovic (@plavookac) on CodePen.
HTML
<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
<div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
CSS
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
z-index: 15;
opacity: 0.5;
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveTop {
background-size: 50% 100px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {Create
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
Css wave animation (by Ted McDonald ) :
See the Pen CSS & SVG Waves Animation by Ted McDonald (@tedmcdo) on CodePen.
HTML
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
CSS (Scss)
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
Css wave animation (by Kween Roxey ) :
See the Pen Wave with Pure CSS Animation by Kween Roxey (@Roxey) on CodePen.
HTML
<div class="waves">
</div>
CSS(less)
html,
body {
width: 100%;
height: 100%;
}
body {
background: #0A212E;
margin: 0px;
overflow: hidden;
animation: color-loop 18s infinite;
}
.waves {
position: relative;
top: 50%;
background: rgba(255, 255, 255, .3);
left: 50%;
width: 25px;
height: 25px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}
.wave(){
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}
.waves:before {
.wave();
animation: wave-animate 3s infinite ease-out;
}
.waves:after {
.wave();
opacity:0;
animation: wave-animate 3s 1.5s infinite ease-out;
}
@keyframes wave-animate {
0% {
transform: scale(0);
opacity: 1;
transform-origin: center;
}
100% {
transform: scale(3);
opacity: 0;
transform-origin: center;
}
}
@keyframes color-loop {
0% {
background: #2CAB5B;
}
25% {
background: #FABC03;
}
50% {
background: #ED4B40;
}
75% {
background: #4286F3;
}
100% {
background: #2CAB5B;
}
}
Css wave animation (by Mehmet Burak Erman ) :
See the Pen Css waves by Mehmet Burak Erman ??♂️ (@mburakerman) on CodePen.
HTML
<div class="wrapper">
<div class="wave"></div>
</div>
CSS (Scss)
body {
background: #333;
padding: 0;
margin: 0;
}
.wrapper {
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
overflow: hidden;
}
.wave {
width: 1000px;
height: 1025px;
position: absolute;
top: -25%;
left: 50%;
margin-left: -500px;
margin-top: -500px;
border-radius: 35%;
background: rgba(255, 255, 255, .75);
animation: wave 15s infinite linear;
}
@keyframes wave {
from { transform: rotate(0deg);}
from { transform: rotate(360deg);}
}
Thanks for reading my post . Comment down below which one is better !
By: Jatinraj