CSS3连续旋转动画(就像加载日规一样)
CSS3连续旋转动画(就像加载日规一样)
提问于 2010-04-06 18:35:56
我正在尝试通过使用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;
}我试过改变动画的持续时间，但没有区别，如果你放慢它的速度，比如说5s，那么在第一次旋转之后，在它再次旋转之前会有一个暂停。我想摆脱的就是这种停顿。
任何帮助都非常感谢，谢谢。
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-06-16 22:38:10
这里的问题是，当您需要一个-webkit-ANIMATION-timing-function时，您已经提供了一个-webkit-TRANSITION-timing-function。您的0到360值将正常工作。
Stack Overflow用户
发布于 2012-09-03 11:52:42
您可能还会注意到一点延迟，因为0deg和360 0deg是同一个点，所以它是从圆圈中的点1返回到点1。这实际上并不重要，但要修复它，您需要做的就是将360 0deg更改为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);}
}此外，可能更类似于苹果装载图标的是一个动画，它转换灰色条纹的不透明度/颜色，而不是旋转图标。
Stack Overflow用户
发布于 2013-12-31 16:14:01
您可以像这样使用动画：
-webkit-animation: spin 1s infinite linear;
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2584138
复制相关文章
相似问题