JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/>
<div id="box">
    <div class="ball"><img src="http://blog.wiziq.com/wp-content/uploads/2013/11/5-150x150.png" /></div>
 </div>

CSS

#box{
    width:900px;
    height:150px;
    position:relative;
    background:red;
    overflow:hidden;
}

.ball{
    width:150px;
    height:150px;
    transition:all 3s ease ;
    margin:0px auto;
}

.ball img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
}

JavaScript

$(document).ready(function(){
    var s=$('.ball').position();
    var g=s.left;
    var r=$('.ball').css('margin-left');
    $('.ball').css({'margin-left':'0px'});
    $('.ball').css({'margin-left':''+r+''});
    if(r=="0px")
    {
    $('.ball').css({'position':'absolute'});
    $('.ball').animate({'left':''+g+'px'});
    }
    $('.ball').css({'transform': 'rotate(360deg)','-webkit-transform': 'rotate(360deg)','-moz-transform': 'rotate(360deg)'});
});