Is this endless loop of css3 animation using javascript not working properly and with delay?

I made this animation here . I need to load the text part of this animation from an external data.txt file. which should be in the following format.

#3 de cada 10 personas mayores de 60 años
*navega por Internet

#58% de los mayores de 60 años
*tiene facebook

#4 de 10 Jovenes Adultos
*quiere trabajar fuera del país

#Add top line with pound sign
*and bottom line with star sign

      

        
        
        
      

    

I wrote this javascript code to read files from data.txt

var languages;
var topLine = new Array();
var bottomLine = new Array();
var j = 1;
$.get('data.txt', function(data) {
   languages = data.split("\n")
   divide(languages);
   document.getElementsByClassName("top")[0].innerHTML = topLine[0];
 document.getElementsByClassName("bottom")[0].innerHTML= bottomLine[0];
     var interval1Id = setInterval(function(){
       if(j < topLine.length){
         change(topLine[j],bottomLine[j]);
       }
       else if (j = topLine.length){
         j=0;
         change(topLine[j],bottomLine[j]);
       }
       j= j+1;
     },5000);
});

  function divide(data){
    for (var i = 0; i < data.length; i++) {
        if (data[i].charAt(0)=="#"){
          data[i] = data[i].replace("#","")
          topLine.push(data[i]);
        }
        else if(data[i].charAt(0)=="*"){
          data[i] = data[i].replace("*","")
          bottomLine.push(data[i]);
        }
      }
  }

  function change(top,bottom) {
    document.getElementsByClassName("top")[0].innerHTML = top;
  document.getElementsByClassName("bottom")[0].innerHTML= bottom;
  }

      

        
        
        
      

    

and css i added to the html div with the appropriate classes:

    .top{
    animation: slideIntop 5s infinite both;
}
.bottom{
    animation: slideInbottom 5s  infinite both;
}

@-webkit-keyframes slideIntop {
    0% {

    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}

@keyframes slideIntop {
  0% {

    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
    100% {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}
@-webkit-keyframes slideInbottom {
  0% {

    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  30% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
    70% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes slideInbottom {
  0% {

    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

    30% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    70% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

    100% {

        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

      

        
        
        
      

    

it should work correctly, but there is some kind of delay in the animation as you can see in the above suggestion and I don't know what I missed here.