Repeat animation after its done javascript css

Question

I am in the progress to make a roulette game, but I got a problem that my "animation" only is able to play once. How can I make the animation repeat every time it is clicked?

const ball = document.getElementsByClassName("ball-container")[0]
var deg = 1080;

function onClick() {
  ball.removeAttribute('style');
  ball.setAttribute('style', `-webkit-transform: rotate(${deg}deg)`);
}

.container {
  position: relative;
  background-color: lightgray;
  height: 300px;
  width: 300px;
}

.ball-container {
  height: 300px;
  width: 300px;
  -webkit-transition: -webkit-transform 4s ease-out;
  border-radius: 50%;
  background-color: green;
}

.ball {
  position: absolute;
  top: 0;
  left: 45%;
  background-color: black;
  border-radius: 50%;
  height: 30px;
  width: 30px;
}

<h1>Press black circle</h1>

<div class="container">
  <div class="board"></div>
  <div class="ball-container">
    <div onclick="onClick()" class="ball"></div>
  </div>
</div>