Text animation inside a slider bar component
Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 
.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}
#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}
@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}
#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}
@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}
