Provide pause and reduced-motion states
See this course’s project requirements
An original 8–12-second three-stage SVG/CSS explanation with deliberate timing, readable title states, pause and reduced-motion alternatives, source and storyboard.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Create a three-stage explanatory storyboard and original SVG.
- Record actual duration/keyframe percentage times.
- Keep geometry, labels and static text consistent.
- Supply manual play/pause/static and reduced-motion rules.
- Deliver fresh HTML with actual source/browser test evidence and limits.
Review and revise
Use these criteria to check your work and choose what to improve.
- Meaning: stages serve a stated relationship.
- Geometry/timing: coordinates and percentages agree.
- Control: pause/static meaning work where actually tested.
- Evidence: fresh artifact and separate source/interaction claims.
Want more background?
The idea in everyday life
The original graphic begins as a static complete preview and animates only after Play. Pause keeps its state without forcing the user to hold focus; Resume continues. The static button stops motion and exposes all points/edges. The reduced-motion rule also removes animation. Actual preference detection needs browser emulation/device testing; a static button test alone does not establish system preference behavior.
Control and nonmotion meaning are separate requirements.
Provide pause and reduced-motion states — worked practice
Control and nonmotion meaning are separate requirements.
Original class state: animate activates keyframes; paused adds animation-play-state: paused; static forces animation: none and opacity 1. Under prefers-reduced-motion: reduce, the animate elements also become nonmoving/visible. A faulty implementation only stops while the button has focus, then resumes on blur: that does not let the reader continue using the page with motion paused.
1. 5.1 Provide
Open motion.html and test Play, Pause, Resume and Show static where a browser is available. Observe actual visual state, not only button text.
You should see: Manual play/pause has visible effect.
2. 5.2 Provide
Tab between controls after pausing and confirm motion does not restart solely because focus moves.
You should see: Paused state does not depend on retained focus.
3. 5.3 Provide
Activate Show static and check all points/edges and the complete visible list. This manual alternative is available even without a preference-setting test.
You should see: Static mode preserves complete meaning.
4. 5.4 Provide
Emulate reduced motion using an available browser tool or actual setting. Verify the media query result separately; mark it unverified if no capability exists.
You should see: Preference behavior has its own actual test or limitation.
What to finish
A manual-control/static/preference checklist with actual results.
Watch for this
Equating a button text change or forced static class with verified system reduced motion.
How can I tell I understand it?
You can separately demonstrate paused state and non motion meaning.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Read duration/keyframes/fill/iteration semantics after canonical redirect; original timing/storyboard supplied.
Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.
Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.
Source & access notes · checked 2026-10-01
Read user-controlled pause principle and automatic-motion conditions; course supplies manual start/pause and static meaning without asserting blanket conformance.
Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.
Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.
Source & access notes · checked 2026-10-01
Read reduce/no-preference and matching media rule; tests distinguish forced-static control from actual system preference emulation.
Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.
Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.