Set durations and holds deliberately
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
For a 9 second sequence, 33.333% is 3 seconds and 66.667% is 6 seconds. The supplied example uses rounded 33/44 and 66/77 bounds for fades, approximately 3–4 and 6–7 seconds, then 88–100 for edges. These are actual percentages, so state the corresponding approximate times rather than falsely claiming exact 3/4 second boundaries.
A keyframe percentage refers to a position within the whole duration.
Set durations and holds deliberately — worked practice
A keyframe percentage refers to a position within the whole duration.
Original middle point opacity 0 through 33%=2.97 s, then reaches 1 at 44%=3.96 s. Last point begins after 66%=5.94 and reaches 1 at 77%=6.93. Edges fade from 88%=7.92 to 9 s. animation-fill-mode both holds the final state after the one-time sequence. It does not make a repeated loop necessary.
1. 3.1 Set
Write the full duration and multiply each supplied percentage by 9 to calculate actual event times.
You should see: Actual percentage times are recorded.
2. 3.2 Set
Inspect the CSS keyframes for middle, last and edges. Match each start/end opacity change to the storyboard.
You should see: CSS states match their explanatory roles.
3. 3.3 Set
Set one iteration and retain the final state with the stated fill behavior. Check that the static text does not disappear during the hold.
You should see: The sequence runs once and holds its final form.
4. 3.4 Set
Change the total to 12 seconds in a copy without changing percentages. Recalculate 44% as 5.28 seconds and adjust the storyboard or keyframes intentionally.
You should see: Changed duration changes event times even with the same percentages.
What to finish
A keyframe timing ledger and held-final-state check.
Watch for this
Treating a percentage as a fixed time regardless of animation duration.
How can I tell I understand it?
You can convert percentages to times and reconcile a changed duration.
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.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.