Add an entrance transition for a notification panel, then make the experience calm and usable for visitors who request reduced motion.
Requirements
Keep the default motion short
Use prefers-reduced-motion
Do not hide content until animation completes
Show a hint
Write down the input contract and the failure cases before coding.
local runtime
RUNTIME OUTPUT
Use your CSS runtime locally, then compare with solution.css.
Use your local runtime, then review the reference solution
LEARN FROM THE SOLUTION
Why the solution works.
The reduced-motion query removes movement rather than removing information. Content remains available when the state class is applied, and the default transition stays short enough to support feedback rather than becoming decoration.
What this exercise teaches
Transitions
Media queries
Inclusive motion design
A PRACTICAL PLAN
Work through Respect reduced-motion preferences with intent.
Translate the contract.Turn the requirements into a short checklist before editing your-solution.css.
Use the example as evidence.Predict the result for the supplied input, then add one boundary case such as an empty value, a limit, or unexpected input.
Review the implementation.Compare your choices against solution.css only after a real attempt.
EXERCISE FAQ
Before you move on.
What does “Respect reduced-motion preferences” teach?
This advanced CSS exercise focuses on Transitions, Media queries, Inclusive motion design. Its requirements define the exact behavior to implement before you write code.
How should I validate this CSS solution?
Apply the CSS to a small HTML fixture in your browser, check narrow and keyboard states, then compare the design decisions in solution.css.
When should I open the reference solution?
Attempt Respect reduced-motion preferences first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
