The Life Starter
Sign up
All courses/Create

Course 300 · Create course 29

Animate a Clear Motion Graphic

Build an original nine-second SVG/CSS explanation with deliberate keyframes, manual play/pause and non motion meaning. Reconcile coordinates/timing and test the actual local artifact without claiming unperformed device checks.

Before you start

Use a local text editor and browser; Node.js is optional for the source assertion.

Design an Original Vector Icon Kit See everything you’ll need

Free download · Original practice data · No external account required. Download the starter pack

What you’ll leave with

An original 8–12-second three-stage SVG/CSS explanation with deliberate timing, readable title states, pause and reduced-motion alternatives, source and storyboard.

Start course Start without an account. Sign in to save lesson progress across devices.

Your project

Start with the practice files. Build your project one lesson at a time.

Practice files are free without an account. Sign in to save your project record in My Proof: a description, checklist, and optional work link. Keep the original files in your own app or notebook; saving a project record does not upload them.

  1. Get your materialsDownload practice filesSupplied practice cases, a blank working record, complete lesson instructions, and annotated worked examples.
  2. Make your projectView the project checklist Work in your own notebook, document, or software. Use the supplied practice examples when you prefer.
  3. Keep a private recordSave a project record Sign in to save a description and checklist, then return to update them.
Course handbook

Know the route before you begin.

Here’s what you’ll need and what you’ll make. You can return to this guide during any lesson.

Who this is for

Learners age 14 and older, including adults; no paid account, current job, customer or outside participant is required.

Prepare before lesson one
  • Use a local text editor and browser; Node.js is optional for the source assertion.
  • Start with the original triangle example and create your own explanatory variant.
  • Keep static meaning available and avoid rapid flashing.
Your final project

Finish with proof you can use.

An original 8–12-second three-stage SVG/CSS explanation with deliberate timing, readable title states, pause and reduced-motion alternatives, source and storyboard.

Save a project record in My Proof
See project checklist and review criteria

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.
Three ideas to help you along the way
Three useful ideas

The rules behind the steps.

01

Motion explains

Each change has an informative purpose.

02

Meaning remains static

Non motion access preserves the full relationship.

03

Test controls directly

A declared rule is different from performed interaction.

What do these words mean?
Key words

Key terms worth knowing.

Keyframe
A declared property value at a particular animation position.
Duration
The total time for one animation cycle.
Fill behavior
How animation values apply before/after its active interval.
Reduced motion
A user preference for less nonessential motion.
Static alternative
A complete non moving presentation of the meaning.
Your route

6 lessons.
One useful project.

Work in order the first time. Each lesson makes something the next lesson can use.

  1. 1
    Up next

    Storyboard an explanation in three stages

    Create an explanatory storyboard with a stated beginning, transition and final meaning.

  2. 2
    35 min

    Build original SVG elements

    Create named vector points/edges whose coordinates and text description agree.

  3. 3
    35 min

    Set durations and holds deliberately

    Translate a timing plan into keyframe percentages and test the final held state.

  4. 4
    35 min

    Animate only meaningful properties

    Use restrained opacity changes and avoid motion that obscures the explanation.

  5. 5
    35 min

    Provide pause and reduced-motion states

    Implement manual play/pause and a complete static meaning route.

  6. 6
    35 min

    Test and deliver the motion explanation

    Deliver a fresh local motion asset and distinguish source assertions from browser interaction.

Use the tools

Tools to help you practice.

See all tools
ZIP · practice files

Animate a Clear Motion Graphic practice files

Supplied practice cases, a blank working record, complete lesson instructions, and annotated worked examples.

Text worksheet

Your course project worksheet

A downloadable text worksheet with each lesson’s working output, space for your answers, and the shared final-project checklist. Save your own copy.

Source transparency

Sources and further study.

Explore the references behind the lessons and take your learning further. Source notes explain access and reuse.

MDN: Using CSS Animations
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.

W3C WAI: Pause, Stop, Hide
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.

MDN: prefers-reduced-motion
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.

MDN: SVG Basic Shapes
Source & access notes · checked 2026-10-01

Read actual circle center/radius, rect and line coordinate controls after canonical redirect; original figures/code 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.

Ready when you are

Start with the first useful move.

You’ll always know what to do, what to make, and where to go next.

Start lesson one