Infinite rotation animation doesn't work smoothly

[Bowen_Shen]

Hello there – I can’t seem to wrap my head around a simple animation.
I was trying to make the text ring keep rotating infinitely.

There are a few existing tutorials and posts I found about this effect, like this and this. Seems like there’re only 2 steps required:

1. Rotate by 360(359?) DEG for some duration
2. Set rotation to 0 DEG for 0 duration at the end of the animation

However, my problem is that the ring always rotates back to 0 DEG in the opposite direction in the end. Please refer to the gif – (There are some 3D transformations applied to this element)

Any idea how I can make the animation smooth by getting rid of the reverse rotation? Thanks!

---

Here is my public share link: Webflow - Bowen Shen

[Bowen_Shen]

Never mind, I just figured out the reason.

I had a 200ms transition on this element. As a result, it was trying to ease the change in rotation angle even though I set the duration of the second step to 0. After removing the transition property, it works as expected.

If anyone happens to run into the same issue, I hope this helps.