Wavy Footer Animation

In this tutorial, you will learn how to add a wavy footer animation with CSS. A wave image is used and animation is added to it. You can download this image with the link provided at the bottom. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="container">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    </div>
</body>

CSS

body {
  background-color: #2e3537;
  margin: 0;
}

.container {
  position: relative;
  height: 100vh;
}

.wave {
  position: absolute;
  bottom: 0;
  height: 120px;
  width: 100%;
  background: url('/wave.png') repeat-x;
  background-size: 250rem 30rem;
  animation: animate 15s linear infinite;
}

@keyframes  animate {
  0% {
    background-position-x: 0;
    background-position-x: -250rem;
  }
}

.wave:nth-child(1) {
  opacity: 0.9;
}

.wave:nth-child(2) {
  opacity: 0.5;
  animation-delay: 0.2s;
  animation-direction: reverse;
}

.wave:nth-child(3) {
  opacity: 0.7;
  animation-delay: 5s;
}

Wavy Footer Animation

HTML

CSS

Wave Image