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;

$(document).ready(function(){fill(1)});

function fill(iteration){
    
    $('#holder').empty();
	$('#holder').removeClass('animation');
    
    $('#holder').html("run: "+ (run++));
	
    $('#holder').bind('webkitAnimationEnd', function(){
		if (iteration===1) {
			$('#holder').unbind('webkitAnimationEnd');
			$('#holder').unbind('webkitAnimationStart');
			fill(2);
		}
    })
	
    $('#holder').bind('webkitAnimationStart', function(){
    });
    
    $('#holder').ready(function(){
        console.log("Class dump for iteration"+iteration+": "+ $('#holder').attr("class"));
        $('#holder').addClass('animation')
        console.log("Class dump for iteration"+iteration+": "+ $('#holder').attr("class"));

    });

}