Looping animations are not smooth

There are several posts all over the forum with the same issue. In most cases it was never resolved.
I’m trying to do something as basic as having an element rotating indefinitely over its z axis SMOOTHLY.
Whatever I do it appears to be impossible, there’s always a jerk at some point. It also appears strange that simply stating loop 360deg, linearly should do the trick yet it plays only once. The only solution I found to make it loop is to add a second step for 0.1deg and have the first step as 359.9deg but this always causes a jerk.

I’ve also tried having a large number of degrees specified for the rotation yet it appears to be limited to a maximum of 2000deg.

Is there a real solution to this apparently simple problem?


Here is my public share link: LINK
(how to access public share link)

Do a 360 rotation…

  • ie: Rotate X 360 1500ms ease.

Then… the very next step

Reset the element to original

  • ie: Rotate X 0 0ms.

Then loop the interaction.

Thanks. That seemed to work.
Now I have a host of other issues… interactions appear very unpredictable. If I now change the transparency of the rotating element to 0 using an interaction and then back to 100 it stops rotating. It also stops rotating if I make it display:none and then display:inline block

I would have to see the internals to really help you with that.

At minimum… provide a published link.

Best case scenario is a shared link.