如何将无限css动画链接到一次性css动画？

我正在尝试设置一个元素旋转的动画，就像有人从顶部开始旋转一样。首先，元素将逆时针旋转，然后再转换为无限顺时针旋转

我的通用CSS如下所示：

div {
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

@-keyframes PreRotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(-360deg);}
}

@-keyframes Rotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(360deg);}
}

我所期望的是，元素将逆时针旋转800毫秒一次（预旋转动画），然后在800毫秒后无限顺时针旋转（旋转动画）。但从这个例子来看，似乎每一次顺时针旋转，旋转都会“打嗝”

有人能解释为什么会发生这种情况，以及如何达到预期的效果吗？独立动画似乎是正确的，但将它们链接在一起会把事情搞砸。

我无法确切地告诉您为什么会发生这种情况，但显然这是由两个动画在某个点上重叠造成的。如果将第二个动画的开始延迟50毫秒，则播放效果良好：

div {
    display:inline-block;
    -webkit-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
}

@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}

@keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}

---

对我来说，它在850毫秒延迟时仍然会打嗝，但当我把它提高到900毫秒时，它对我来说非常有效。谢谢@戴维文：100毫秒的延迟可能仍然很小。很高兴我能帮忙！：-）