CSS transitions on appended and prepended elements?

Question

I'm appending and prepending to a list to create my own slider, but I'm noticing that the behavior isn't the same forwards and backwards. I assume it has something to do with reflows as seen in this question. How can I fix this so that the appending the first child, and prepending the last child have the same transition?

HERE IS A FIDDLE

click on buttons below slider

function classes(){ //This works well.  
    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1098.53px

    $('#nikoSlider ul').append($('#nikoSlider li:first-child')) 

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //0px
    middleSpan(1);
}

function backClasses(){//This delays.   

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1104px   

    $('#nikoSlider ul').prepend($('#nikoSlider li:last-child')) 

    console.log(window.getComputedStyle($('#nikoSlider li:first-child')[0]).marginLeft)
    //-1104px

    middleSpan(-1); 
}

And the css:

#nikoSlider li:first-child{ 
    margin-left:-100vw;
}

#nikoSlider li{
   transition: color 3s, margin .5s, opacity .5s, transform 2s;
   margin:0;
}