console
function pause(){
document.getElementById('ball').style.animationPlayState='paused';
}
let styleStr = 'ax 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, ay 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate';
function race(){
document.getElementById('ball').style.animation=styleStr;
document.getElementById('ball').style.animationPlayState='running';
}
function goto(){
document.getElementById('ball').style.animation='none';
document.getElementById('ball').style.top='150px';
document.getElementById('ball').style.left='120px';
}
<div onmouseover="pause()" onmouseout="race()" onclick="goto()">
<div class="ball" id="ball"></div>
<div class='circle'></div>
</div>
.circle{
width: 250px;
height: 150px;
margin: 100px;
border-radius: 50% 50%;
border: black 1px solid;
}
@keyframes ax{
0%{left: 0px;}
100%{left: 250px;}
}
@keyframes ay{
0%{top: 0px;}
100%{top: 150px}
}
.ball{
position: fixed;
width: 20px;
height: 20px;
margin: 100px;
border-radius: 50%;
border: red 1px solid;
animation:
ax 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
ay 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate
}