CSS3连续旋转动画（就像加载日晷）

Question

我正在尝试使用 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;
    }

我尝试过更改动画持续时间，但没有什么区别，如果你直接放慢速度，比如说 5 秒，那么在第一次旋转之后，在再次旋转之前会有一个暂停，这一点会更明显。我想摆脱的正是这种停顿。

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

Answer 1

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

Answer 2

您还可能会注意到一点滞后，因为 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);}
}

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

Answer 3

你可以像这样使用动画：

-webkit-animation: spin 1s infinite linear;

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

Answer 4

如果您只是在寻找 webkit 版本，这很不错： http://s3 .amazonaws.com/37assets/svn/463-single_spinner.html 来自 http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

Answer 5

你的代码看起来是正确的。我认为这与您使用 .png 以及浏览器在旋转时重绘对象的方式效率低下有关，导致挂起（您在什么浏览器下测试？）

如果可能的话，将 .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();

示例。