CSS CSS3 连续旋转动画（就像加载日晷）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2584138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Continuous Rotate Animation (Just like a loading sundial)
提问by Gcoop
I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.
我正在尝试使用 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;
}
I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It's this pause I want to get rid of.
我试过改变动画持续时间，但没有什么区别，如果你把它放慢，说 5s，它更明显的是，在第一次旋转之后，它再次旋转之前会有一个暂停。这是我想要摆脱的停顿。
Any help is much appreciated, thanks.
非常感谢任何帮助，谢谢。
采纳答案by rrahlf
Your issue here is that you've supplied a -webkit-TRANSITION-timing-functionwhen you want a -webkit-ANIMATION-timing-function. Your values of 0 to 360 will work properly.
您的问题是您在-webkit-TRANSITION-timing-function需要-webkit-ANIMATION-timing-function. 您的 0 到 360 之间的值将正常工作。
回答by Ilan Biala
You also might notice a little lag because 0deg and 360deg are the same spot, so it is going from spot 1 in a circle back to spot 1. It is really insignificant, but to fix it, all you have to do is change 360deg to 359deg
你也可能会注意到一点延迟，因为 0deg 和 360deg 是同一个点，所以它从一个圆圈中的点 1 回到点 1。这真的无关紧要，但要修复它，你所要做的就是将 360deg 更改为359度
my jsfiddle illustrates your animation:
#myImg {
-webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
Also what might be more resemblant of the apple loading icon would be an animation that transitions the opacity/color of the stripes of gray instead of rotating the icon.
此外，与苹果加载图标更相似的是一个动画，它可以转换灰色条纹的不透明度/颜色，而不是旋转图标。
回答by Kinglybird
You could use animation like this:
你可以像这样使用动画：
-webkit-animation: spin 1s infinite linear;
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
回答by Tudor
If you're only looking for a webkit version this is nifty: http://s3.amazonaws.com/37assets/svn/463-single_spinner.htmlfrom http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
如果您只是在寻找 webkit 版本，这很不错：http: //s3.amazonaws.com/37assets/svn/463-single_spinner.html来自http://37signals.com/svn/posts/2577-loading- spinner-animation-using-css-and-webkit
回答by Alex
Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)
你的代码似乎是正确的。我认为这与您使用的是 .png 的事实有关，并且浏览器在旋转时重绘对象的方式效率低下，导致挂起（您在什么浏览器下测试？）
If possible replace the .png with something native.
如果可能的话，用原生的东西替换 .png。
see; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
看; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
Chrome gives me no pauses using this method.
Chrome 使用这种方法不会让我停顿。
回答by alex
I made a small librarythat lets you easily use a throbber without images.
我制作了一个小型库，可以让您轻松使用没有图像的 throbber。
It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.
它使用 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();
例子。
