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

【问题标题】：CSS3 Continuous Rotate Animation (Just like a loading sundial)CSS3 连续旋转动画（就像加载日晷）
【发布时间】：2011-02-04 18:18:32
【问题描述】：

我正在尝试通过使用 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 秒，则更明显的是，在第一次旋转之后，在再次旋转之前会暂停。这是我想摆脱的停顿。

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

【问题讨论】：

Webkit 特定的代码并没有减少 CSS3.. 考虑到当时没有其他提供商提供相同的功能 :)
动画不应该从0跑到359吗？如果它从 0 运行到 360，那么您将在 0 的帧播放两次，因为第 0 帧和第 360 帧将是相同的......
@BradParks 另一方面，如果你从 0 转到 359，那么应该在 359.5 发生的动画将被完全跳过。在大多数情况下，0 度和 360 度的重叠会快到难以察觉。
@Blazemonger 不一定。您可以在 jsfiddle 中自己尝试一下，看看根据动画持续时间的不同，它可能不会那么微妙。
这整个 '359 度' 的事情是愚蠢的 - 你无法控制动画的步骤。假设 60fps 的 1 秒动画是每帧 6 度，所以你应该停在“354 度”。但是就像我说的那样，您无法控制此处的帧速率，因此这是徒劳的。我想一个聪明的实现可以检测到 0-360 并相应地调整。我只是将时间和角度乘以 100 - 即。 0 度到 36000 度，因此理论上的故障只会每 100 次旋转发生一次。但我发现无论你做什么，都会出现动画故障

标签： animation webkit css transform

【解决方案1】：

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

如果可能的话，用原生的东西替换 .png。

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

Chrome 使用这种方法不会让我停顿。

【讨论】：

完美，我很确定你的假设是正确的，但是我使用的是 PNG，因为我的加载图标不是日晷，而是核风格的符号......它不一定是这样我可以将其更改为您建议的方法 - 谢谢！

【解决方案2】：

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

【讨论】：

典型的复制粘贴错误。非常感谢！（我实际上是从shareaholic 得到我的css，并且由于属性命名错误，它使用了默认的ease 计时功能）。

【解决方案3】：

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

【讨论】：

非常酷。我实际上收集了 GIF 和 CSS 的微调器。 My collection。如果您知道更多，请告诉我。

【解决方案4】：

您可能还会注意到一点延迟，因为 0deg 和 360deg 是同一个点，所以它会从点 1 绕一圈回到点 1。这确实微不足道，但要修复它，您所要做的就是将 360 度更改为 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);}
}

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

【讨论】：

你的 JS Fiddle 包含我见过的最简洁的图像旋转实现——完美（感谢发帖）。
谢谢，如果您需要任何其他帮助，请告诉我，顺便说一下，我使用了 webkit 的动画前缀，但您还应该包含 mozilla 前缀，因为它们使用 -moz-css 规则。
您也可以将时间和角度乘以 100 - 即。 0 度到 36000 度 :-)
@Simon_Weaver 仍然需要 35999 度才能看不到任何双帧。
@IlanBiala 除了我非常怀疑您的显卡是否以 720fps 运行 ;-) 在不知道帧速率的情况下，您不可能知道帧之间的增量是多少。如果有的话，您最好将其设置为 348 度，因为在 60 fps 的半秒内，每帧将前进 12 度。我宁愿只放 360 并希望有人聪明地对浏览器进行编程以自动调整

【解决方案5】：

我做了一个small library，可以让你轻松使用没有图像的悸动者。

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

Example.

【讨论】：

【解决方案6】：

你可以像这样使用动画：

-webkit-animation: spin 1s infinite linear;

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

【讨论】：

非常简单的解决方案！
这些天不要忘记删除供应商前缀