OP here, thanks for asking. While the `perspective` technique works too, it has the downside of needing a careful combination of scroller elements and properties.

This approach adds a single class to the image container and that's it. Plus you can control many aspects of the animation such as entry/exit ranges, and make it control other properties like opacity or color, for example.

I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.

This method should still support GPU acceleration, as `transform` (or rotate/scale/etc.) is the only property being animated. The benefit of animation-timeline seems to be that it's much easier to set up than a CSS perspective context.

No doubt quite a few folk with the same question. Keen to understand performance tradeoffs.

Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)

I was wondering the same thing. That translateZ is a bit fiddly to get right, so I could believe this is a bit easier to use, maybe? And presumably this could be used for other properties besides position, like colors, opacity or blurs.