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

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

1 个答案: