Weird animations

a.css

div {
    border-radius: 50%;
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(90deg, orange, blue)
}

div.move-out {
    animation: 10s weird-move-out infinite;
}

@keyframes weird-move-out {
    0% { transform: translateX(0) rotate(0); }
    50% { transform: translateX(90vw) scale(0.1) rotate(180deg); }
    75% { transform: translateX(10vw) rotate(270deg); }
    100% { transform: translateX(100vw) scale(2) rotate(359deg); }
}

a.html

<div>
</div>
<button>Click me</button>

a.js

document.querySelector('button').onclick = function() {
    document.querySelector('div').classList.toggle('move-out');
};