Search code examples
csscss-transforms

Difference in CSS rotate 359 vs rotate 360

I suppose this is more academic than anything but I have an element I'm setting up to infinite spin and in my CSS file I have to add this (yes, I have my moz and webkit declarations in there too but that's not relevant here)

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

It seems odd not to set 360 here but it seems to work with 359. Is 360 simply equivalent to 0 or what? Trying to understand how this works and if there's a practical difference.

Solution

  • This is used, because on an infinite animation if the end and start are the same then there would be a delay when starting the next cycle..

    0 and 360 degrees having the same representation would each consume a step of the animation.