Best Css wave animation(Easy to make)

css wave animation

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
Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.

6 Comments

  1. Saved as a favorite!, I enjoy your blog!

  2. Bookmarked!, I love your blog!

  3. tҺe website іѕ really good, I love your site!

  4. “This site was… how do you say it? Relevant!! Finally I’ve found something that helped me. Cheers!”

Comments are closed.