Text animation inside a slider bar component

.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;
  }