This infinite loop of css3 animation using javascript is not working properly and running with a delay ?

Question

I made this animation here. I have to load the text part of this animation from and external file data.txt. which should be in 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 the css i added to the html div with respective classes is:

    .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 properly but there is some delay in the animation as you see in the provide above and i don't know what i missed here

Answer 1

i tried to start the animation inside the success function by adding a class :

https://stackoverflow.com/a/5771504/3168107

It's working now. It had to do with timing (and loading).