CSS3连续旋转动画（就像正在加载日d一样）

120

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

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

— Gcoop
source

14

特定于Webkit的代码并没有减少CSS3 ..考虑到当时其他提供程序都没有提供相同的功能:)

— 2012年

4

动画是否应该从0播放到359？如果它从0变到360，那么您将在0帧播放两次，因为第0帧和第360帧是相同的...

— Brad Parks

1

@BradParks另一方面，如果您从0到359，那么应该在359.5发生的动画将被完全跳过。在大多数情况下，0和360的重叠是如此之快以至于不被察觉。

— Blazemonger

@Blazemonger不一定。您可以在jsfiddle中自己尝试一下，然后看到它取决于动画的持续时间可能并不那么微妙。

— Ilan Biala 2014年

1

这整个“ 359度”很愚蠢-您无法控制动画的步骤。假设以60 fps拍摄1秒的动画，即每帧6度，那么您应该在“ 354度”处停止。但是就像我说的那样，您无法控制此处的帧频，因此完全没有用。我以为智能实现可以检测到0-360并进行相应调整。我只是将时间和角度乘以100-即。0度到36000度，因此理论毛刺只会每100圈发生一次。但我发现无论如何您都会遇到动画故障

— Simon_Weaver 2014年

71

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

— 拉尔夫
source

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

— doekman '02

55

您可能还会注意到一些滞后，因为0deg和360deg是同一点，所以它从一圈的点1返回到点1。这确实无关紧要，但是要解决它，您要做的就是将360deg更改为359度

我的jsfiddle说明了您的动画：

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

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

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

— 伊兰·比亚亚（Ilan Biala）
source

3

您的JS Fiddle包含我见过的最简洁的实现，它实现了简单的图像旋转-完美（并感谢您发帖）。

— 菲利普·墨菲

谢谢，让我知道是否需要其他帮助，顺便说一句，我为动画使用了webkit前缀，但是您还应该包括mozilla前缀，因为它们改用-moz-css规则。

— Ilan Biala 2013年

您还可以将时间和角度乘以100-即。0度到36000度：-)

— Simon_Weaver 2014年

@Simon_Weaver仍然需要35999deg才能看不到任何双帧。

— Ilan Biala 2014年

2

@IlanBiala，除非我非常怀疑您的图形卡以720fps运行；-)如果您不知道帧率就无法知道帧之间的增量是不可能的。如果可以的话，您也可以设置348度，因为在60fps的情况下半秒会前进12度。我只想输入360，希望有人对浏览器进行了智能编程以自动调整

— Simon_Weaver 2014年

27

您可以使用如下动画：

-webkit-animation: spin 1s infinite linear;

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

— 金鸟
source

2

很棒且简单的解决方案！

— TheLD 2014年

8

如果您只是在寻找Webkit版本，那就太好了：http : //s3.amazonaws.com/37assets/svn/463-single_spinner.html来自http://37signals.com/svn/posts/2577-loading-使用CSS和WebKit进行微调动画

— 都铎王朝
source

9

很酷。实际上，我GIF和都收集了微调器CSS。我的收藏。如果您了解更多，请告诉我。

— doekman '02

1

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

如果可能，请用本机替换.png。

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

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

— 亚历克斯
source

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

— Gcoop

1

我做了一个小图书馆，可让您轻松使用没有图像的节拍器。

它使用CSS3，但如果浏览器不支持JavaScript，则会使用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();

实例。

— 亚历克斯
source