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

问题描述

我正在尝试使用 PNG 和 CSS3 动画复制 Apple 风格的活动指示器(日晷加载图标).我让图像旋转并连续旋转，但动画完成后似乎在下一次旋转之前有延迟.

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

我曾尝试更改动画持续时间，但没有任何区别，如果您将其慢下来，说 5 秒，则更明显的是，在第一次旋转后，在再次旋转之前会有一个暂停.这是我想摆脱的停顿.

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.

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

Any help is much appreciated, thanks.

推荐答案

你在这里的问题是你已经提供了一个 -webkit-TRANSITION-timing-function 当你想要一个 -webkit-ANIMATION-timing-function.您的 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屋！