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

我已经尝试过改变动画的持续时间，但没有区别，如果你慢下来说5s就更明显了，在第一次旋转后再次旋转之前有一个暂停。这是我想要摆脱的暂停。

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

Answer 1

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

Answer 2

你也可能会注意到一点延迟，因为0deg和360deg是同一个点，所以它从一个圆圈中的点1回到现在1.它真的是微不足道的，但要修复它，你所要做的就是将360deg更改为359deg

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

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

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

我制作了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

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

6 个答案: