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.


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


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;

Wave Image

Click to view image