JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sun"></div>

CSS

@-webkit-keyframes sunrise {
    
0%{
    bottom: 0;
    left: 0;
}

50%{
    bottom: 100px;
}


100%{
    bottom: 0;
    left: 400px;
}


}

@-moz-keyframes sunrise {
    
0%{
    bottom: 0;
    left: 0;
}

50%{
    bottom: 100px;
}


100%{
    bottom: 0;
    left: 400px;
}


}

@keyframes sunrise {
    
0%{
    bottom: 0;
    left: 0;
}

50%{
    bottom: 100px;
}


100%{
    bottom: 0;
    left: 400px;
}


}


#sun {
    
    bottom: 0;
    position: absolute;
    
    -webkit-animation: sunrise 1s ease;
    -moz-animation: sunrise 1s ease;
    animation: sunrise 1s ease;
    
    background: yellow;
    border-radius: 50px;
    height: 50px; width: 50px;
    
}

JavaScript

$("#sun").bind('animationend webkitAnimationEnd', function() { alert("fin") } )