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);}
}

我期望会发生的是，元素将逆时针旋转800ms一次（PreRotate动画），然后在800ms后无限旋转（旋转动画）。从示例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);}
}

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

1 个答案:

JSFiddle