Reduced motion support in Bootsrap

Introduction

Reduced motion support helps make websites easier to use for people who get dizzy or uncomfortable with animations.

When you add animations or transitions to your website.

When you want to respect user preferences for less motion.

When you want to improve accessibility for people sensitive to movement.

When you want your site to feel calm and less distracting.

When you want to follow good web design practices.

Syntax

Bootsrap

@media (prefers-reduced-motion: reduce) {
  /* CSS rules to reduce or remove animations */
}

This CSS media query checks if the user prefers less motion.

Inside it, you can turn off or simplify animations and transitions.

Examples

This example stops all animations and transitions on elements with the animated class if the user prefers reduced motion.

Bootsrap

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none !important;
    transition: none !important;
  }
}

This example disables smooth scrolling for users who want reduced motion.

Bootsrap

@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }
}

Sample Program

This page shows a blue box that moves left and right using animation. If the user has set their system to prefer reduced motion, the animation stops, making the box stay still.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Reduced Motion Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      width: 5rem;
      height: 5rem;
      background-color: #0d6efd;
      margin: 2rem auto;
      animation: move 3s infinite alternate;
    }
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(10rem); }
    }
    @media (prefers-reduced-motion: reduce) {
      .box {
        animation: none !important;
      }
    }
  </style>
</head>
<body>
  <main class="container text-center">
    <h1 class="my-4">Reduced Motion Support</h1>
    <div class="box" aria-label="Animated blue box"></div>
    <p>If your system prefers reduced motion, the blue box will not move.</p>
  </main>
</body>
</html>

Important Notes

Test reduced motion by changing your system settings or using browser DevTools to simulate it.

Always provide a fallback or simpler experience for users who prefer less motion.

Summary

Use @media (prefers-reduced-motion: reduce) to detect user preference.

Turn off or simplify animations inside this media query.

This improves accessibility and user comfort.

Practice

1. What is the main purpose of using @media (prefers-reduced-motion: reduce) in Bootstrap?

easy

A. To increase the speed of all animations on the page

B. To detect if the user prefers fewer animations for accessibility

C. To add more animations for visual appeal

D. To change the color scheme based on user preference

Solution

1. Step 1: Understand the media query purpose

   The media query @media (prefers-reduced-motion: reduce) checks if the user has requested reduced motion in their system settings.

2. Step 2: Connect to accessibility goals

   This helps improve accessibility by reducing or disabling animations that might cause discomfort or distraction.

3. Final Answer:

   To detect if the user prefers fewer animations for accessibility -> Option B

4. Quick Check:

   Reduced motion media query = detect user preference [OK]

Hint: Look for user preference detection in media queries [OK]

Common Mistakes:

• Thinking it speeds up animations
• Assuming it adds more animations
• Confusing it with color scheme changes

2. Which of the following is the correct syntax to start a CSS block that applies styles only when the user prefers reduced motion?

easy

A. @media (prefers-reduced-motion: no-preference) { }

B. @media (motion-preference: reduce) { }

C. @media (prefers-reduced-motion: reduce) { }

D. @media (prefers-motion: reduce) { }

Solution

1. Step 1: Recall the exact media query syntax

   The correct media query to detect reduced motion preference is @media (prefers-reduced-motion: reduce).

2. Step 2: Compare options

   @media (prefers-reduced-motion: reduce) { } matches the exact syntax. Other options have incorrect property names or values.

3. Final Answer:

   @media (prefers-reduced-motion: reduce) { } -> Option C

4. Quick Check:

   Correct media query syntax = @media (prefers-reduced-motion: reduce) { } [OK]

Hint: Remember exact media feature name: prefers-reduced-motion [OK]

Common Mistakes:

• Using wrong media feature names
• Swapping 'reduce' with 'no-preference'
• Missing parentheses or braces

3. Given the CSS below, what will happen when a user has 'prefers-reduced-motion: reduce' enabled?

div {
  animation: slide 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

medium

A. The div will have no animation and stay still

B. The div will keep sliding with animation

C. The div will slide faster than normal

D. The div will disappear from the page

Solution

1. Step 1: Understand the base animation

   The div normally has a sliding animation that repeats infinitely.

2. Step 2: Analyze the media query effect

   When the user prefers reduced motion, the media query sets animation: none; on the div, stopping the animation.

3. Final Answer:

   The div will have no animation and stay still -> Option A

4. Quick Check:

   Reduced motion disables animations = The div will have no animation and stay still [OK]

Hint: Check if animation is set to none inside reduced motion query [OK]

Common Mistakes:

• Assuming animation speeds up
• Thinking animation continues unchanged
• Believing element disappears

4. You wrote this CSS but animations still run for users who prefer reduced motion:

@media prefers-reduced-motion: reduce {
  .btn {
    animation: none;
  }
}

What is the error?

medium

A. Missing parentheses around the media feature

B. Wrong selector used for buttons

C. Animation property cannot be set to none

D. Media query should be inside a CSS class

Solution

1. Step 1: Check media query syntax

   The media query must have parentheses around the feature: @media (prefers-reduced-motion: reduce).

2. Step 2: Identify the missing parentheses

   The given code misses parentheses, so the media query is invalid and ignored by browsers.

3. Final Answer:

   Missing parentheses around the media feature -> Option A

4. Quick Check:

   Media queries require parentheses [OK]

Hint: Always wrap media features in parentheses [OK]

Common Mistakes:

• Forgetting parentheses in media queries
• Using wrong CSS selectors
• Thinking animation:none is invalid

5. You want to improve accessibility by disabling Bootstrap's fade animations for users who prefer reduced motion. Which CSS snippet correctly achieves this?

hard

A. .fade { animation: none; }

B. .fade { animation-duration: 0s; }

C. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } }

D. @media (prefers-reduced-motion: reduce) { .fade { transition: none !important; animation: none !important; } }

Solution

1. Step 1: Use the correct media query for reduced motion

   Only styles inside @media (prefers-reduced-motion: reduce) apply when user requests reduced motion.

2. Step 2: Disable animations and transitions on .fade

   Setting animation: none !important; and transition: none !important; ensures Bootstrap's fade animations are turned off.

3. Step 3: Check other options

   .fade { animation-duration: 0s; } disables animation always, ignoring user preference. @media (prefers-reduced-motion: no-preference) { .fade { animation: none; } } uses wrong media query value. .fade { animation: none; } disables animation always, not respecting user choice.

4. Final Answer:

   @media (prefers-reduced-motion: reduce) { .fade { transition: none !important; animation: none !important; } } -> Option D

5. Quick Check:

   Disable animations inside reduced motion media query [OK]

Hint: Disable animations only inside reduced motion media query [OK]

Common Mistakes:

• Disabling animations globally ignoring user preference
• Using wrong media query values
• Not disabling both animation and transition