Search code examples
csskeyframerotateanimation

Keyframe animation has delay after every animation, how to stop it?

I trying to spin an image using CSS keyframes to rotate(360deg).
I used keyframe, but every time when animation is complete there is some kind of delay. Also I tried to set 100% { -webkit-transform: rotate(359deg) }, but it didn't work out, I still get that delay.
Do you have any idea to prevent it from delaying after every animation?
Here is the link of what I've done so far.
Thanks in advance!

Solution

  • The default value for the animation-timing-function property is ease so your animation slightly accelerate at the beginning and decelerate at the end. This gives you the sense of delay between the loops.

    Set the value to linear to have an infinite linear animation:

    -webkit-animation: spin 1s linear infinite;
   -moz-animation: spin 1s linear infinite;

    DEMO