CSS animations

What you'll learn

• Why most animation hurts more than it helps, and the small handful of cases where it pays off
• How to use transitions for tiny state changes without thinking about timing
• Why transform and opacity are the only two properties you should animate often
• Building keyframe animations and knowing when they beat transitions
• Choreographing several animated pieces with delays, staggering, and custom easing
• Honoring the reduced-motion preference without rewriting every rule
• Using the view transitions API for smooth crossfades between page states

1. 01
   Why animate

   Motion as feedback, not decoration. Why a calmer page often beats a livelier one.
   10 min
2. 02
   Transitions

   The transition shorthand, what's animatable, and easing curves explained without the calculus.
   15 min
3. 03
   Transforms

   translate, scale, rotate. Why moving things with transform is cheap and moving with top is not.
   16 min
4. 04
   Keyframe animations

   @keyframes and the animation shorthand. When a transition is not enough.
   17 min
5. 05
   Choreography

   Delays, staggering, and custom easing. Making several pieces move together without looking robotic.
   16 min
6. 06
   Prefers-reduced-motion

   The one accessibility rule animation engineers must internalize. Short on purpose.
   10 min
7. 07
   View transitions

   The API that crossfades between page states. Where it shines and what breaks it.
   18 min