CSS3 Continuous Rotate Animation Just like a loading sundial

Question

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

User · Accepted Answer

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

User · Answer

If you re only looking for a webkit version this is nifty  http   s3 amazonaws com 37assets svn 463-single spinner html from http   37signals com svn posts 2577-loading-spinner-animation-using-css-and-webkit

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[animation] CSS3 Continuous Rotate Animation (Just like a loading sundial)

Examples related to animation

Examples related to webkit

Examples related to css

Examples related to transform