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

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

非常感谢任何帮助,谢谢.

Answer 1

这里的问题是你提供了一个-webkit-TRANSITION-timing-function你想要的时间-webkit-ANIMATION-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-微调动画-使用- CSS-和WebKit的