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

Question

我在一个圆圈里画了 8 个点。我想旋转圆圈，但突然像时钟指针一样，不顺畅。每旋转 12.5% 的时间，我想将旋转角度增加 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);
    }
    ...
}

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

Clock-like rotation with animation keyframes

css

css-animations