相关疑难解决方法(0)

我试图通过使用PNG和CSS3动画复制Apple风格活动指示器(日食加载图标).我让图像旋转并连续进行,但在动画完成下一次旋转之前似乎有一段延迟.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

我已经尝试过改变动画的持续时间,但没有区别,如果你慢下来说5s它更明显的是在第一次旋转之后有一个停顿再次旋转.这是我想要摆脱的暂停.

非常感谢任何帮助,谢谢.

我可以将转换用作转换属性的值吗？

transition-property: transform;

W3C 转换标准没有将转换列为 Animatable 值。

事实上，W3C 转换标准在 7 的表中缺少 Animatable:Yes/No 的行。'transform' 属性。

我担心这是否合法。

这个stackoverflow answer建议使用transform作为transition-property的值。

我可以使用 0% 和 100% 关键帧获得变换动画，但如果只涉及 2 个状态，我更喜欢过渡而不是动画。