Почему мой анимированный нижний колонтитул с волнами воды не работает в HTML CSS? ⇐ CSS

[Anonymous]

Я наткнулся на этот анимированный нижний колонтитул с волнами воды на YouTube и сейчас сам работаю над проектом, поэтому решил внедрить этот нижний колонтитул в свой собственный проект. Дело в том, что это не работает. Изображение «волны» вообще не отображается. Ниже я оставлю свой код, ссылку на YouTube и то, как выглядит нижний колонтитул в моем проекте. Буду признателен за вашу помощь и спасибо, что уделили время!

Код: Выделить всё

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(https://i.postimg.cc/TPBH3rHw/blue-waves.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;
}
}

Код: Выделить всё

[list]
[*][i][/i]
[*][i][/i]
[*][i][/i]
[*][i][/i]
[/list]
[list]
[*]Services
[*]Work
[*]About
[*]Contact
[/list]

Ссылка на проект YouTube:
https://www.youtube .com/watch?v=UpkEANWC2Ms&t=605s
Мой нижний колонтитул:
Как выглядит нижний колонтитул моего проекта
Я попробовал изменить высоту и ширину класса «волны», возился со всеми значениями задействованных классов, скопировал код ютубера в точку, переместил изображение и попробовал несколько раз, ничего не изменилось. Изображение по-прежнему не отображается, не говоря уже о анимации.
Примечание: у YouTuber, за которым я слежу, был display: flex; на элементе body это может быть проблемой. Несмотря на то, что я пытался сделать то же самое и со своим элементом тела, это испортило мой макет, но изображение все равно не появилось.
Другая проблема может заключаться в положении моего элемента класса волн, но я также пытался возиться с этим и ничего не получилось.

Подробнее здесь: https://stackoverflow.com/questions/785 ... n-html-css