CSS3连续旋转animation（就像加载日</s>）

我想通过使用PNG和CSS3animation复制一个苹果风格的活动指标（日loading加载图标）。 我有图像旋转和连续进行，但animation完成之前似乎有一个延迟，然后再进行下一个旋转。

@-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; } 

我试图改变animation的持续时间，但它没有区别，如果你慢下来说5秒更明显的是，第一次旋转之后有一个暂停再次旋转。 这是我想摆脱的这个停顿。

任何帮助非常感谢，谢谢。

Answer 1

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

Answer 2

你也可能会注意到有点滞后，因为0deg和360deg是同一个点，所以它从第一个点开始回到第一个点。这实在是微不足道，但是要解决这个问题，你所要做的就是把360deg改成359deg

我的jsfiddle演示了你的animation：

 #myImg { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } 

也可能更类似于苹果加载图标将是一个animation，转换灰色条纹的不透明度/颜色，而不是旋转图标。

Answer 3

你可以使用这样的animation：

 -webkit-animation: spin 1s infinite linear; @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg)} } 

Answer 4

如果你只是在寻找一个webkit版本，这是很好的： http ： //s3amazonaws.com/37assets/svn/463-single_spinner.html从http://37signals.com/svn/posts/2577-loading-微调animation-使用- CSS-和WebKit的

Answer 5

你的代码似乎正确。 我会认为这是与你使用.png的事实有关，浏览器在旋转时重画对象的方式效率低下，导致挂起（你在什么浏览器下testing？）

如果可能的话用本地的东西replace.png。

看到; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome使用此方法不会暂停。

Answer 6

我做了一个小型图书馆 ，可以让你轻松地使用没有图像的throbber。

它使用CSS3，但如果浏览器不支持它，则会返回到JavaScript。

 // First argument is a reference to a container element in which you // wish to add a throbber to. // Second argument is the duration in which you want the throbber to // complete one full circle. var throbber = throbbage(document.getElementById("container"), 1000); // Start the throbber. throbber.play(); // Pause the throbber. throbber.pause(); 

例子 。