CSS endless rotation on the Y axis

I am trying to do animation of the coin that rotates infinitely on the Y axis, but I can't quite make this work. Here's the demo: https://jsfiddle.net/kaeatjag/ As you can see it only animates once, one rotation and then starts from the beginning. How can i fix this?

.coin {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(to right, red 50%, black 50%);
  animation: coin-rotate 1s both infinite;
}

@keyframes coin-rotate {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(180deg);
  }
}

<div class="coin"></div>