A practical guide to building CSS keyframe animations correctly, covering the fade-up pattern using only transform and opacity for GPU-friendly performance. Explains fill modes (why 'both' is almost always what you want), per-keyframe timing functions for realistic motion like bouncing, and how to properly implement prefers-reduced-motion — including the nuance that 'reduced' means replacing motion with opacity fades rather than simply disabling all animation. Also warns about the pitfall of animation: none breaking elements that rely on fill-mode: forwards for their final visible state.
Table of contents
Building a fade-up, step by stepFill modes: the part everyone gets wrongTiming per keyframeThe accessibility part: prefers-reduced-motionWhat “reduced” should mean983 Impressions