CSS3连续旋转动画(就像加载日)

我试图通过使用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它更明显的是在第一次旋转之后有一个停顿再次旋转.这是我想要摆脱的暂停.

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

1> 小智..：

---

这里的问题是你提供了一个-webkit-TRANSITION-timing-function你想要的时间-webkit-ANIMATION-timing-function.您的0到360值将正常工作.

2> Ilan Biala..：

---

你也可能会注意到一点延迟,因为0deg和360deg是同一个点,所以它从一个圆圈中的点1回到现在1.它真的无关紧要,但要解决它,你要做的就是将360deg改为359deg

我的jsfiddle说明了你的动画:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

另外,苹果加载图标可能更具有类似性的是动画,它可以转换灰色条纹的不透明度/颜色,而不是旋转图标.

---

你的JS小提琴包含了我见过的简单图像旋转的最简洁的实现 - 完美(并感谢发布).

---

@IlanBiala除了我非常怀疑你的显卡是以720fps运行;-)你不可能知道帧之间的增量是什么而不知道帧速率.如果你有任何东西,你也可以放348度,因为在60fps的半秒时,每帧会提前12度.我宁愿放360也希望有人聪明地编程浏览器来自动调整

3> Kinglybird..：

---

你可以使用这样的动画:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

---

真棒而简单的解决方案!

4> Tudor..：

---

如果你只是在寻找一个webkit版本,那就太好了:http://s3.amazonaws.com/37assets/svn/463-single_spinner.html来自http://37signals.com/svn/posts/2577-loading-微调动画-使用- CSS-和WebKit的

---

很酷.我实际上收集了旋转器,包括"GIF"和"CSS".[我的收藏](http://zanstra.home.xs4all.nl/picks/progress.html#css_animations).如果您了解更多,请告诉我.