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;
}


}


#sun {
    
    bottom: 0;
    position: absolute;
    
    -webkit-animation-name: sunrise;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    
    background: yellow;
    border-radius: 50px;
    height: 50px; width: 50px;
    
}