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

Question

我正在尝试为元素旋转设置动画，就像有人启动顶部一样。起初，元素会逆时针旋转，然后过渡到无限顺时针旋转。

我拥有的通用 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 毫秒（PreRotate 动画），然后在 800 毫秒后无限顺时针旋转（旋转动画）。不过，从示例 http://jsfiddle.net/Fu5V2/6/ 来看，似乎每次顺时针旋转，旋转都会“打嗝”。

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

Answer 1

我不能确切地告诉你为什么会发生这种情况，但显然这是由于两个动画在某个时间点重叠造成的。如果您将第二个动画的开始延迟 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);}
}

JSFiddle