SOURCE

console 命令行工具 X clear

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