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

我试图复制一个苹果风格的活动指示器(日晷加载图标)使用 PNG 和 CSS3动画。我有图像旋转，并不断这样做，但似乎有一个延迟后，动画完成之前，它做下一个旋转。

@-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 它只是更明显，在第一次旋转之前有一个暂停再次旋转。我想摆脱这种停顿。

非常感谢你的帮助，谢谢。

175378 次浏览
小开

你的代码看起来没错。我认为这是因为你使用了。Png 和浏览器在旋转时重绘对象的方式效率低下，导致挂起(您在哪个浏览器下测试?)

如果可能的话，将.png 替换为原生的。

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

使用这种方法，Chrome 不会给我任何停顿。

小开
最佳答案

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

小开

如果您只是在寻找一个 webkit 版本，这是漂亮的: http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit的 http://s3.amazonaws.com/37assets/svn/463-single_spinner.html

小开

你也可能会注意到一点延迟，因为0deg 和360deg 是同一个点，所以它是从点1在一个圆圈回到点1。这真的是微不足道的，但修复它，所有你要做的就是改变360度到359度

我的 jsfiddle 演示了您的动画: 

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


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

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

小开

I made a 小图书馆 that lets you easily use a throbber without images.

它使用 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();

示例 。

小开

你可以像这样使用动画:

-webkit-animation: spin 1s infinite linear;


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

提交答案