Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 671
Machavity Avatar asked Dec 09 '22 10:12

Machavity


1 Answers

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.

like image 114
Gabriele Petrioli Avatar answered Jan 03 '23 14:01

Gabriele Petrioli