CSS3 Continous Rotate Animation (Just like a loading sundial)
- by Gcoop
Hi,
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;
}
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.
