JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
hello world
</div>

CSS

.animation{
		-webkit-animation-name: test;
		-webkit-animation-duration: 2s;
		-webkit-animation-iteration-count: 1
}

div{
		position: relative;
		width: 50%;
	}

@-webkit-keyframes test{
		
		0%, 100% {
				left: 0px;
		}
			
		50% {
				left: 50px;
		}	
	}
	
	@keyframes test{
		
		0%, 100% {
				left: 0px;
		}
			
		50% {
				left: 50px;
		}	
	}

JavaScript

var run=1;


function fill(iteration){
    
    $('#holder').empty();
    
    $('#holder').html("run: "+ (run++));
	
    $('#holder').bind('webkitAnimationEnd', function(){
		if (iteration===1) {
			$('#holder').unbind('webkitAnimationEnd');
			$('#holder').unbind('webkitAnimationStart');
    	    $('#holder').removeClass('animation');
            setTimeout( function(){
                $('#holder').addClass('animation');
                fill(2)}, 1);
		}
    })
}

$(function(){
    $('#holder').addClass('animation');
    fill(1);
});