CSS3 Continuous Rotate Animation (Just like a loading sundial)

animation webkit css transform
Gcoop picture Gcoop · Apr 6, 2010 · Viewed 172.1k times · Source

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.

Answer

rrahlf picture rrahlf · Jun 16, 2010

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.

Related questions

CSS endless rotation animation

I want to make a rotation of my loading icon by CSS. I have an icon and the following code: <style> #test { width: 32px; height: 32px; background: url('refresh.png'); } .rotating { -webkit-transform: rotate(360deg); -webkit-transition-duration: 1s; -webkit-transition-delay: now; …

Read More
How to create a pulse effect using -webkit-animation - outward rings

I have found this article: http://www.zurb.com/article/221/css3-animation-will-rock-your-world on css3 animations. I am trying to create a similar effect seen on the site above but on personal site at: www.imfrom.me Where I have the …

Read More
iPhone WebKit CSS animations cause flicker

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/ After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see …

Read More