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

我已经尝试过改变动画的持续时间，但是没有什么区别，如果你把它的速度降下来，比如说5秒，那么在第一次旋转之后，在它再次旋转之前，会有一个停顿。这是我想摆脱的停顿

---

非常感谢您的帮助。

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

如果可能，将.png替换为本机文件

看

---

Chrome使用此方法不会让我暂停。

您这里的问题是，当您需要

-webkit动画计时功能时，您提供了
-webkit转换计时功能。0到360的值将正常工作
 如果你只是在寻找一个webkit版本，这很好：从
你也可能会注意到一点延迟，因为0deg和360deg是同一个点，所以它从圆圈中的点1返回到点1。这确实无关紧要，但要解决它，你所要做的就是将360度改为359度


另外，苹果加载图标更相似的地方可能是一个动画，它可以转换灰色条纹的不透明度/颜色，而不是旋转图标。
我制作了一个动画，让你可以轻松使用没有图像的抖动器

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

很好，我很确定你的假设是正确的，但是我使用的是PNG，因为我的加载图标不是日晷，而是核样式的符号。。。但不必如此，我可以将其更改为您建议的方法-谢谢！典型的复制粘贴错误。谢谢！（事实上，我的css是从中获得的，而且由于名称错误，它使用了默认的
ease
计时功能）。非常酷。我实际上收集微调器，包括
GIF
和
CSS
。如果您知道更多，请让我知道。特定于Webkit的代码不会减少CSS3。。考虑到当时没有其他提供商提供相同的功能：）动画不应该从0运行到359吗？如果从0运行到360，则0处的帧将播放两次，因为第0帧和第360帧将是相同的…@BradParks另一方面，如果从0运行到359，则应在359.5处发生的动画将被完全跳过。在大多数情况下，0和360的重叠会很快被忽略。@Blazemonger不一定。您可以在JSFIDLE中自己尝试，并发现根据动画持续时间的不同，它可能不会如此微妙。整个“359度”的事情很愚蠢-您无法控制动画的步骤。假设1秒的动画为60fps，即每帧6度，则应在“354度”处停止。但是就像我说的，你不能控制帧速率，所以这是徒劳的。我想象一个智能的实现可以检测到0-360并相应地调整。我只是将时间和角度乘以100-即0度到36000度，因此理论上的小故障只会每100次旋转发生一次。但我发现不管你怎么做，你都会遇到动画问题。你的JS Fiddle包含了我见过的最简洁的简单图像旋转实现-完美（感谢发帖）。顺便说一句，如果你需要任何其他帮助，请告诉我，我在动画中使用了webkit前缀，但您也应该包括mozilla前缀，因为它们使用-moz css规则。您还可以将时间和角度乘以100-即0度到36000度：-）@Simon_Weaver仍然需要359990度才能看不到任何双帧。@IlanBiala除非我非常怀疑您的图形卡是否正确以720fps的速度运行；-）如果不知道帧速率，就不可能知道帧之间的增量是多少。如果有什么不同的话，你也可以把348度放进去，因为在每秒60帧的半秒钟内，每帧将前进12度。我宁愿把360和希望有人智能编程浏览器自动调整真棒和简单的解决方案！现在别忘了删除供应商前缀
-webkit-animation: spin 1s infinite linear;

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