css clip text with moving background - html

Question

I'm really a newbie when it comes to CSS - but I saw this cool effect with using the text as a mask for the background. I got it working just fine but have set my mind on trying to animate the background to continuously slide to the left. I just can't make it work.
h1 {
font-family: Poppins;
font-size: 12rem;
color: transparent;
background-image: url(people.jpg);
background-size: cover;
background-repeat: repeat-x;
background-clip: text;
-webkit-background-clip: text;
animation: slide_background 15s linear infinite;
}
#keyframes slide_background {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
<h1>PEOPLE</h1>
it slides alright... but so does the text mask.
How do keep the text stationary while the background slides to the side?

Answer 1

change it to this:
#keyframes slide_background {
from {
background-position: 0px 0px;
}
to {
background-position: 100% 0px;
}
}
Now it's working! Thanks #Temani Afif for point out what I did wrong.

Answer 2

For infos: you may also use mix-blend-mode and text-indent for the animation
h1 {
font-family: Poppins;
font-size: 12rem;
position: relative;
z-index: 1;
background: white;
margin: 0;
animation: slide_background 15s linear infinite;
}
h1:before {
content: "";
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/output/fashion-q-c-640-480-10.jpg);
background-size: cover;
}
#keyframes slide_background {
from {
text-indent: 0;
}
to {
text-indent: -100vw;
}
}
<h1>PEOPLE</h1>