css - 带有动画关键帧的时钟式旋转

Question

我在一个圆圈中画了 8 个点。我想旋转圆圈，但突然像时钟指针一样，不顺畅。对于完成完整旋转所需的每 12.5% 的时间，我想将旋转 Angular 增加 45 度。

我这样定义我的动画:

@-webkit-keyframes clock { 

  0% {
    transform: rotate(0deg);
  }
  12.4% {
    transform: rotate(0deg);
  }
  12.5%{
    transform: rotate(45deg);
  }
  24.9% {
    transform: rotate(45deg);
  }
  25%{
    transform: rotate(90deg);
  }
  ...

我通过指定非常接近的百分比来消除中间关键帧的粗略尝试并没有完全通过集合。我偶尔会出现断断续续的情况，我猜这是由于一些舍入问题造成的。

请注意，我有其他方法可以实现我想要的动画，我特别想问一下我们是否可以在 CSS 关键帧动画中应用突变效果。

引用:http://codepen.io/chardie/pen/embLrP

Answer 1

只需更改 timing function使动画成为 steps(1) 而不是 linear。这会阻止您想要避免的状态之间的平滑过渡:

http://codepen.io/anon/pen/raoQGm

#loading{
    -webkit-animation: 3s clock infinite steps(1);
}
@-webkit-keyframes clock {
    0% {
        transform: rotate(0deg);
    }
    12.5%{
        transform: rotate(45deg);
    }
    25%{
        transform: rotate(90deg);
    }
    ...
}