JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
    <ul>
        <li style="background: lightblue; color: red">1</li>
        <li style="background:gray; color: black;">2</li>
    </ul>
</div>
<button onclick="window.makeAnimation()">Make animation</button>
<button onclick="makeAnimationWithTimeout()">Make animation with timeout</button>

CSS

.viewport { width: 600px; height: 300px; }
ul { list-style: none; margin: 0; padding: 0; position: relative; width: 250%;  }
ul li { display: block; float: left; width: 600px; height: 300px; line-height: 300px; font-size: 30px; text-align: center; }

JavaScript

function reflow(elt){
    console.log(elt.offsetHeight);
}
function makeAnimation()
{
    var ul = document.getElementsByTagName('ul')[0];
    ul.style.transition = 'none 0s linear 0s';
    ul.style.left = '-600px';
    reflow(ul)
    ul.style.transition = 'all 0.2s ease-out';
    ul.style.left = '0px';

}

function makeAnimationWithTimeout()
{
    var ul = document.getElementsByTagName('ul')[0];
    ul.style.transition = 'none 0s linear 0s';
    ul.style.left = '-600px';
    
    setTimeout(function(){
       ul.style.transition = 'all 0.2s ease-out';
       ul.style.left = '0px';
    }, 100);

}