jquery and Animation.css not working

I am writing a function to slideInText from left, show it on screen for 5 secs and slideOutLeft from left using animation.css plugin. This is not working the way I wanted.

I have an array that stores values of different Ids and I will need to pass these Id's each time to an api call. for every api call I make I will get some 5 values and I will need to display these values one after another and then make an api call with new id value. this is a continuous process. that should happen. I am attaching the fiddle here, https://jsfiddle.net/ngxL81vw/ can anyone help where am i going wrong?

var dataArray = [12,13,14,15,16,17,18,19];
var dataFromServer = [
{ 'name': 'Value1', 'position': 1608.55434},
{ 'name': 'Value2', 'position': 60.66757},  
{ 'name': 'Value3', 'position': 1608.55434},
{ 'name': 'Value4', 'position': 60.66757},  
];
function showTextValue(){
var index = Math.floor(Math.random() * dataArray.length);
var randomVal = dataArray[index];
if(randomVal === null || randomVal === undefined){
    randomVal = '21';
}

var cnt = 0;
// d3.json('/api/'+randomVal, function(error,dataFromServer) { 
  $.each(dataFromServer, function(i,value){
  var txt = value;
  console.log(txt.name);
  xCnt = i;
    function AnimateOneByOne()
    {   
        if(txt.position != null){
        $("#text").html(txt.name).addClass('slideInLeft');
        $("#value").html(txt.position.toFixed(2)).addClass('slideInLeft');
        $('#text').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          $(".animation0").removeClass('slideInLeft');
        });
        }    
    }
  setInterval(AnimateOneByOne, 2000);
 // time++;
  //});
  var delay= setInterval(showTextValue,5000);
}); 
}
var showtxtInterval = setInterval(showTextValue,5000);