Lesson 3 of 8
Thoughtful motion
- 13 min
- 4 checks
- 3 hints
- Go to task
Goal
Transitions that respect the user
Explanation
Good motion shows the user what just happened; it isn't there to show off. The lightest kind is a transition: you name the property that changes and how long the change takes, and the browser handles the rest.
Animate only transform and opacity, because they don't force the browser to recalculate where elements sit, so the motion stays smooth. Animating width or top makes it choppy.
Motion makes some people genuinely dizzy, so they ask their operating system to reduce it. @media (prefers-reduced-motion: reduce) is how you find out they asked, and respecting it is essential, not an optional extra.
Your task
Make .box grow with a smooth transition when the pointer hovers over it, and stop the motion for anyone who asked to reduce it.
Checks
4 checks- The box has a transition with a duration above zero
- The transition targets transform, not the box's size
- There's a :hover rule with a transform
- There's a rule that respects prefers-reduced-motion