CSS Animations Beyond the Basics: Timing Functions, Performance, and Real Patterns

CSS animations are one of those features where the basics are easy and the nuances matter enormously. You can make something bounce in 30 seconds. Making it bounce in a way that feels natural and does not destroy your frame rate takes considerably more understanding. I have spent hundreds of hours refining animation patterns, and the lessons are surprisingly consistent. The performance hierarchy Not all CSS properties are created equal for animation. The browser handles them at different stages of the rendering pipeline: Compositor-only properties (transform, opacity): These animate on the GPU without triggering layout or paint. They run at 60fps even on modest hardware. Always prefer these. Paint properties (background-color, box-shadow, border-radius): These trigger a repaint but not a relayout. Moderately expensive. Acceptable for small elements, problematic for large ones. Layout properties (width, height, margin, padding, top, left): These trigger relayout, repaint, and composite.