Respect reduced motion

Read first Task 45

Wrap animations in prefers-reduced-motion so they switch off.

Task

Which media query detects a reduced-motion preference?

The editor already contains a starting point. Change it until every check passes — the Next task button unlocks when it does.

What you start with

<style>
  .box { animation: pop 1s infinite; }
</style>
<div class="box">Hi</div>

Syntax reference

<style>
  .box { animation: pop 1s infinite; }
  @media (prefers-reduced-motion: reduce) { .box { animation: none; } }
</style>
<div class="box">Hi</div>

Read it, then write it yourself. Copy-paste teaches nothing.

HTML & CSS 1 automatic check Accessibility and polish

Code editor Ctrl + Enter runs

<style>
  .box { animation: pop 1s infinite; }
</style>
<div class="box">Hi</div>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

Check 1

One correct answer:

<style>
  .box { animation: pop 1s infinite; }
  @media (prefers-reduced-motion: reduce) { .box { animation: none; } }
</style>
<div class="box">Hi</div>

Track progress

0 of 56 tasks complete

Next task unlocks when every check passes.

← Previous

Next task (pass every check first)

Respect reduced motion

Respect reduced motion

Task

Why this works