Before this lesson
Understand CSS state selectors, transforms and media queries.
What you will be able to do
Use restrained motion for feedback and provide equivalent reduced-motion behavior.
Understand the mechanism
Transitions interpolate state changes while animations schedule keyframes. Hover feedback often suits transitions; independent sequences may use animation. Identify the information motion communicates rather than adding constant attention-seeking movement.
Transform and opacity often suit visual feedback better than changing layout dimensions, but are not a universal performance guarantee. Avoid transition:all because later property changes can unintentionally animate layout.
Respect reduced-motion preference by removing unnecessary displacement while retaining other feedback. Do not simply accelerate movement into near-flashing behavior; some effects should be disabled entirely.
Motion cannot be the only information channel or block completion. Visual transitions and asynchronous business state are separate; an animation ending does not prove a request succeeded.
Runnable example
Run HTML examples as separate .html files in a modern browser. Prepare resource files and multi-file modules as described in the lesson.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
.demo-link{display:inline-block;padding:16px 24px;border:2px solid #176343;border-radius:12px;color:#176343;transition:transform 160ms ease,background-color 160ms ease}
.demo-link:hover,.demo-link:focus-visible{transform:translateY(-3px);background:#e9f3e9}
.demo-link:focus-visible{outline:3px solid #866200;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.demo-link{transition:none}.demo-link:hover,.demo-link:focus-visible{transform:none}}
</style><a class="demo-link" href="#practice">Try the exercise</a><p id="practice">Feedback remains understandable without motion.</p>
</body></html>Trace and verify
Check pointer and keyboard feedback. Emulate reduced motion: displacement disappears while background and outline remain. Rapidly enter and leave without queued effects. Navigation works regardless of animation completion.
Common mistakes and boundaries
Do not hide essential content awaiting a script-driven entrance; script failure could leave it invisible. Avoid moving large text containers continuously.
Practice challenge
Design one success transition and a motion-free equivalent, identifying the actual request result that triggers them.
Reference solution and reasoning
Render an explicit Saved message before adding optional motion. Preserve message and timing in reduced-motion mode, and keep failure feedback separate.