CSS3 Continuous Rotate Animation (Just like a loading sundial)

121
votes

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.

6
animationwebkitcsstransform
Webkit-specific code doesn't make it less CSS3.. considering that none of the other providers did provide equal functions at that time :) – 19h
Shouldn't the animation run from 0 to 359? If it ran from 0 to 360, then you'd have the frame at 0 played twice, since frame 0 and frame 360 would be the same... – Brad Parks
@BradParks On the other hand, if you go from 0 to 359, then the animation that should take place at 359.5 is skipped completely. In most cases, the overlap of 0 and 360 will be so quick as to be unnoticable. – Blazemonger
@Blazemonger not necessarily. You can try it out yourself in a jsfiddle and see that depending on the animation duration it may not be so subtle. – Ilan Biala
this whole '359 degrees' thing is silly - you have no control over the step of the animation. assuming a 1 second animation with 60fps that's 6 degrees per frame so you should stop at '354 degrees'. but like I said you don't have control over the frame rate here so it's pretty futile. I'd imagine a smart implementation could detect 0-360 and adjust accordingly. I just multiplied the time and angle by 100 - ie. 0 deg to 36000 degrees so the theoretical glitch will only occur every 100 rotations. but I've found you're going to get animation glitches no matter what you do anyway – Simon_Weaver

6 Answers

71
votes

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.

55
votes

You also might notice a little lag because 0deg and 360deg are the same spot, so it is going from spot 1 in a circle back to spot 1. It is really insignificant, but to fix it, all you have to do is change 360deg to 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);}
}

Also what might be more resemblant of the apple loading icon would be an animation that transitions the opacity/color of the stripes of gray instead of rotating the icon.

28
votes

You could use animation like this:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
1
votes

Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)

If possible replace the .png with something native.

see; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome gives me no pauses using this method.

1
votes

I made a small library that lets you easily use a throbber without images.

It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

Example.