m4g1c14n

Thanks for the information, I fixed it by adding style 
will-change: transform; into the element that will be transformed, before even with 10 iteration, my macbook pro 16 m1 reached 30% cpu and for 30 iteration reached 50% cpu
with this style applied, I can run 50 iteration animation and the CPU hover around 7-8% 😃
Check the new pen

See the Pen QWBgJEw by m4g1c14n (@m4g1c14n) on CodePen

Okay nailed it....
after the help from everyone, i have finally find the culprit
 
The culprit is the Transition style
Check the Codepen
, you can see that it is not animating correctly, BUT if you remove the transition style, it works perfectly
 
Thanks a lot everyone, I would not notice this without all of your help
 
PS : Is this considered a bug??

Damn... i have just found the solution myself... I must store the tweenFromTo reference, and pause the reference instead .... 
Sorry , can this post be deleted now? ^^;