I stumbled across this water wave animated footer on YouTube and I’m currently working on a project myself so I decided to implement the footer into my own project. The thing is that’s it’s not working. The “wave” image is not showing up in the first place. I’ll drop my code, the YouTube link and what the footer looks like in my project below. I’d appreciate your help, and thank you for your time!

HTML Code:

<footer>
        <div class="waves">
            <div class="wave" id="wave1"></div>
            <div class="wave" id="wave2"></div>
            <div class="wave" id="wave3"></div>
            <div class="wave" id="wave4"></div>
        </div>
        <ul class="social-icons">
            <li><a href=""><i class = "fab fa-instagram"></i></a></li>
            <li><a href=""><i class = "fab fa-instagram"></i></a></li>
            <li><a href=""><i class = "fab fa-instagram"></i></a></li>
            <li><a href=""><i class = "fab fa-instagram"></i></a></li>
        </ul>
        <ul class="menu">
            <li><a href="">Services</a></li>
            <li><a href="">Work</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </footer>

CSS code:

footer{
    position: relative;
    width: 100%;
    background: var(--dark-color);
    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 150px;
}
footer .social-icons,
footer .menu{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}
footer .social-icons li a{
    font-size: 2em;
    color: var(--light-color);
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
}
footer .social-icons li a:hover{
    transform: translateY(-10px);
}
footer .menu li a{
    font-size: 1.2em;
    color: var(--light-color);
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
    opacity: 0.75;
}
footer .menu li a:hover{
   opacity: 1; 
}
footer .waves .wave{
  position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(wave.png);
    background-size: 1000px 100px;
}
footer .waves .wave #wave1{
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}
footer .waves .wave #wave2{
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animateWave_02 4s linear infinite;
}
footer .waves .wave #wave3{
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWave 3s linear infinite;
}
footer .waves .wave #wave4{
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animateWave_02 3s linear infinite;
}
@keyframes animateWave{
    0%{
        background-position-x: 1000px;
    }
    100%{
        background-position-x: 0px;
    }
}
@keyframes animateWave_02{
  0%{
      background-position-x: 0;
  }
  100%{
      background-position-x: 1000px;
  }
}

YouTube project link:
https://www.youtube.com/watch?v=UpkEANWC2Ms&t=605s

My footer:
What my project’s footer looks like

I tried changing the height and width of the “waves” class, messed around with all the values of the classes involved, copied the YouTuber’s code to the dot, I relocated the image and tried it several times, nothing changed. The image still does not show up let aside animate.
Side note: The YouTuber I’m following had display: flex; on the body element, this might be the problem. Even though I tried doing the same to my body element as well, it messed up my layout but still the image did not show up.
The other problem might be the position of my waves class element but I also tried messing around with that and nothing worked.