CSS 3d Transform (Spin animation) does not rotate fully and continuously

Essentially, I have a div that is being rotated by a CSS animation. It utilizes the rotateY transformation. I have attached a snippet of the code below. There is obviously other code that contributes to it being functional. Visually, it appears that it spins to one side, then spins back in the other direction. It actually used to spin completely and fluidly in a perfect circular motion, and I am unsure why it ceased to have this behavior.

.square {
  width: 200px;
  height: 100px;
  animation: spinx 10s infinite linear;
}


@keyframes spinx {
  from{
    transform: rotatey(0deg);
  }
  to{
    transform: rotatey(-360deg);
  }
}

<div id="border" class="square">
  <img src="https://www.simpleimageresizer.com/_uploads/photos/77addf44/placeholder.com-logo3_1_200x100.jpg" />
</div>