Animation, states, prefers-reduced-motion

This lesson is part of the year-long Code Academy Alfred path. Goal: understand transitions, hover/focus states, reduced motion in real web / mobile-web design conditions.

Micro-interactions guide the eye. Prefer transitioning opacity/transform (performant).

Visible focus is mandatory: outline or contrasted ring. Never remove outline without an alternative.

@media (prefers-reduced-motion: reduce) respects users sensitive to motion.

Practice immediately: rebuild the example, then change it. Memory comes from active repetition, not passive reading.

If you get stuck, use Cursor with a precise prompt (context + goal + constraints), then explain the generated diff yourself.