- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Media Features - prefers-reduced-motion
CSS prefers-reduced-motion media feature allows checking if a user has enabled a setting on their device to reduce unnecessary animations. This setting informs the device's browser that the user has chosen an interface that removes, minimises, or substitutes motion-driven animations.
Possible Values
no-preference − This value denotes that the user has not indicated any specific preferences on their device. The keyword value is considered as false.
reduce − This value denotes that the user has activated the reduce motion setting on their device. The keyword value is considered as true.
Syntax
prefers-reduced-motion: no-preference|reduce;
CSS prefers-reduced-motion - Example
If you have the reduce motion setting turned on, the green box on this page will move more slowly and smoothly, and the background will turn pink and the text will have a line under it. If you don't have the reduce motion setting turned on, the green box will move normally, and the background will stay green.
pulse − This animation causes the element to pulse in size every four seconds.
dissolve − This animation causes the element to fade in and out every two seconds.
Follow steps on this link to emulate prefers-reduced-motion mode and test following examples.
Here is an example −
<html> <head> <style> .box { animation: pulse 4s linear; background-color: green; color: white; width: 160px; padding: 10px; border-radius: 5px; } @media (prefers-reduced-motion) { .box { animation: dissolve 2s linear; background-color: pink; text-decoration: overline; } } @keyframes pulse { 0% { transform: scale(0.5); } 50% { transform: scale(0.8); } 100% { transform: scale(08.); } } @keyframes dissolve { 0% { opacity: 0.7; } 50% { opacity: 0.5; } 100% { opacity: 0.7; } } </style> </head> <body> <div class="box"> prefers-reduced-motion </div> </body> </html>
CSS prefers-reduced-motion - no-preference Value
The @media query with (prefers-reduced-motion: no-prefernce) will disabled animations (The box will remain stationary) for users who prefer reduced motion.
Here is an example −
<html> <head> <style> .box { width: 220px; height: 100px; background-color: violet; animation: moveRight 2s linear infinite; } @keyframes moveRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: no-preference) { .box { animation: none; transform: none; } } </style> </head> <body> <div class="container"> <div class="box">prefers-reduced-motion: no-preference</div> </div> </body> </html>
CSS prefers-reduced-motion - reduce Value
The @media query with (prefers-reduced-motion: reduce) checks for the user's preference for reduced motion. If the user has enabled a reduced motion setting on their device the box moving horizontally from left to right in a continuous loop.
Here is an example −
<html> <head> <style> .box { width: 220px; height: 100px; background-color: violet; animation: moveRight 2s linear infinite; } @keyframes moveRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .box { animation: none; } } </style> </head> <body> <div class="container"> <div class="box">prefers-reduced-motion: reduce</div> </div> </body> </html>
Following table shows how to enable reduced motion in Firefox on different operating systems:
Operating System | How to enable reduced motion in Firefox |
---|---|
GTK/GNOME | Settings > Accessibility > Seeing > Reduced animation |
Older versions of GNOME | GNOME Tweaks > General tab (or Appearance, depending on version) > Animations |
Plasma/KDE | System Settings > Workspace Behavior -> General Behavior > "Animation speed" set to "Instant" |
Windows 10 | Settings > Ease of Access > Display > Show animations in Windows |
Windows 11 | Settings > Accessibility > Visual Effects > Animation Effects |
macOS | System Preferences > Accessibility > Display > Reduce motion |
iOS | Settings > Accessibility > Motion |
Android 9+ | Settings > Accessibility > Remove animations |
Firefox about:config | Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. |
To Continue Learning Please Login
Login with Google