Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 11 / 12

Motion with choice

An animated detail should respect people who prefer less motion.

Learning paths12 min

Let's discover together

  1. 1

    Transition interpolates property changes, such as a small hover transform. Avoid unnecessary transition:all; name the property and use a short duration. Motion should not carry essential information on its own.

  2. 2

    The project starts without motion. Inside @media (prefers-reduced-motion:no-preference), it adds a transition and a 2px shift. With reduce, that block does not apply.

  3. 3

    The preference comes from browser/system settings, not window width. The workshop reports the detected value. In the local file, change accessibility settings or browser emulation and compare both states.

  4. 4

    Do not use rapid flashing or continuous animation in this activity. Check that removing motion preserves focus, text and action. The button is for practice: a transition does not mean a real operation occurred.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Add a subtle transition only when the preference allows it.

Now it's your turn

Discovery workshop

Predict, change, compare

The transition exists only under prefers-reduced-motion:no-preference. The system reports reduce.
Build your answers and check when you are ready.
A moment to understand

Is preference detected from the phone model?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Compare reduce and no-preference and record observed duration and transform. Show that the page remains usable in both cases.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.