CSS

CSS Wave Animation Examples

By sarnathindiaFebruary 27, 20234 Mins Read

CSS Wave Animation Examples

Today, we’re going to explore the fascinating world of CSS wave animation. Cascading Style Sheets (CSS) is an essential component of web development that enables designers to style and layout web pages.

With CSS, you can create dynamic and interactive web pages that engage users and enhance the user experience. One of the most exciting aspects of CSS is the ability to create animations that add life and movement to your website.

In this post, we’ll walk you through the process of creating a beautiful wave animation using CSS. We’ll cover the essential concepts of CSS animation, including keyframes, transforms, and transitions, and show you how to use them to create a fluid and mesmerizing wave effect.

So, let’s dive in and learn how to create a stunning wave animation with CSS!

CSS Wave Animation Examples

1. CSS Wave Animation with a .png

CSS Wave Animation with a .png script made with HTML / CSS / JS and pen By Jelena Jovanovic.

Source: codepen.io/plavookac

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>

HTML

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 {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

CSS

2. Pure CSS wave animation

Pure CSS wave animation script made with HTML / CSS / JS and pen By raykuo.

Source: codepen.io/raykuo

HTML

h1 RAY KUO
h2 UX Designer / Front-end Developer

HTML

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: #3E606F;
  font-family: Roboto;
  overflow: hidden;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 50%;
    min-width: 300vw;
    min-height: 300vw;
    background-color: #FCFFF5;
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  &:before {
    bottom: 15vh;
    border-radius: 45%;
    animation-duration: 10s;
  }
  
  &:after {
    bottom: 12vh;
    opacity: .5;
    border-radius: 47%;
    animation-duration: 10s;
  }
}

@keyframes rotate {
  0% {transform: translate(-50%, 0) rotateZ(0deg);}
  50% {transform: translate(-50%, -2%) rotateZ(180deg);}
  100% {transform: translate(-50%, 0%) rotateZ(360deg);}
}

h1, h2 {
  color: #3E606F;
  z-index: 10;
  margin: 0;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
}

h1 {
  font-size: 36px;
  
  @media (min-width: 480px) {
    font-size: 11.5vw;
  }
}

h2 {
  font-size: 14px;
  
  @media (min-width: 480px) {
    font-size: 3vw;
  }
}

CSS

3. CSS wave animation

CSS wave animation script made with HTML / CSS / JS and pen By P. Rachel.

Source: codepen.io/Prachl

HTML

<div class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>

HTML

CSS

/* for the pen */
html, body {
  margin: 0;
  min-height: 100%;
  background-color: #f2f2f2;
}

/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}

CSS

I Hope you liked Hand-picked list of CSS Wave Animation.

sarnathindia

My name is Rohit Vadaviya and I am Programmer, Analyst And Blogger based in Baroda, India. I try to share some awesome scripts on my blog which I personally feel are useful for me as well as all developers, programmers and designers while working on any project.

Leave A Reply Cancel Reply