THE WEB ANIMATION PERFORMANCE TIER LIST

Summary from the TLDR Dev newsletter

This post contains a tier-based ranking for web animation performance techniques organized around how they interact with the browser's render pipeline. S-Tier animations use compositor-thread properties, like `transform`, `opacity`, and `filter`, that can run smoothly even when the main thread is blocked, while lower tiers have increasingly expensive operations like triggering paint (C-Tier) or layout (D-Tier). Hardware-accelerated animations are generally best, but there are important caveats like browser de-optimizations and GPU memory limitations.