However if you instead simply use a transform with a duration and set the x and y to the final value instead of manually setting all the intermediate values, it's obvious why things should be much faster: there are no longer any js turns required to carry out the entire animation other than the first one where you set it up, and there's no bridge crossing required except for the first one, either.
Did I miss something here? Why would the author think that setting transform in a loop would be faster than setting top/left in a loop? They are basically equivalent. CSS animations with a duration are vastly different, however.
Besides, is it really obvious that top/left would be faster (in a non-transition case)? It requires an additional layout phase compared to transforms:translate().
Being from the "show me state" I like to measure before doing any performance optimization work or making general claims.
Also, I think you may be surprised how much overhead crossing the bridge from js to native incurs. It's pretty negligible in most cases, but for things like animation it can be a killer.