CSS关键帧：如何将步进旋转与线性旋转

Question

@keyframes spinner-spin
  0%
    transform: rotate(0deg)
  24.99999%
    transform: rotate(90deg)
  25%
    transform: rotate(270deg)
  49.99999%
    transform: rotate(360deg)
  50%
    transform: rotate(180deg)
  74.99999%
    transform: rotate(270deg)
  75%
    transform: rotate(90deg)
  99.99999%
    transform: rotate(180deg)
  100%
    transform: rotate(360deg)

现在我正在做一些真正的hacky。原因是因为我需要每25％做一次“步骤”。我似乎无法应用第二个“步”动画来进行额外的旋转，因为旋转不会叠加，它们只是接管。什么是更可靠的解决方案，每25％应用额外的-90度旋转步骤？