Y 轴上的 CSS 无限旋转

我正在尝试制作在 Y 轴上无限旋转的硬币的动画，但我无法完成这项工作。这是演示:https://jsfiddle.net/kaeatjag/
如您所见，它只动画一次，旋转一次，然后从头开始。我怎样才能解决这个问题？

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

最佳答案

只需向动画添加额外的帧并将其恢复到原始状态即可。

从 0% (0deg) -> 50% (180deg) -> 100% (0/360deg) 转换

注意:根据需要调整动画持续时间

Updated fiddle

.coin {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(to right, red 50%, black 50%);
  animation: coin-rotate 2s both infinite;
}
@keyframes coin-rotate {
  0 {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

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

关于Y 轴上的 CSS 无限旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37966363/