CSS3连续旋转动画（就像装载日晷） [英] CSS3 Continuous Rotate Animation (Just like a loading sundial)

问题描述

我试图通过使用PNG和CSS3动画复制一个苹果风格活动指示灯（日晷加载图标）。我有图像旋转，不断地做，但似乎有它的下一个旋转的前动画完成后延迟完成。

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.

@-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它只是更明显的是，第一次旋转后有一个暂停再次转动了。正是这种停顿我想摆脱的。

I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It's this pause I want to get rid of.

任何帮助很多AP preciated，谢谢。

Any help is much appreciated, thanks.

推荐答案

在这里你的问题是，你一个 -webkit-过渡计时功能当你提供希望有一个 -webkit动画定时功能。您的0到360的值将正常工作。

Your issue here is that you've supplied a -webkit-TRANSITION-timing-function when you want a -webkit-ANIMATION-timing-function. Your values of 0 to 360 will work properly.

这篇关于CSS3连续旋转动画（就像装载日晷）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！