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屋!