Prefers Reduced Motion Media Query

Prefers Reduced Motion Media Query

Adjust styling to any element based on if someone has reduced motion turned on in their OS. This is useful for toggle visibility, or altering transitions and animations to lesson or remove potentially harmful motion.

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
7.28.21

Similar items

Items
2777
Search

CSS Logo Marquee / Ticker

5.25.22

Show a Preloader Only Once Per Day

1.3.24

Dark/Light Mode Favicon Images

9.12.23

Skip to Main Nav Link

6.14.23

Vimeo Video as Background

9.20.21

Restock

View Restock

CSS Halftone Overlay Effect

9.20.21

Toggle Accordion Attributes for Accessibility

3.29.21

Hide/Show Based on Breakpoints and Count of Items

3.26.21

Trap Focus in Modal/Dialog/Cart

1.14.21

Add to Calendar Button

8.12.20

Show/Hide Based on Date/Time

3.27.20

Hide/Show Element From <select>

1.6.20

Click Something When Pressing ESC Key

12.4.19

Effect All Siblings on Hover With CSS

8.30.22

Accessible Modal

3.4.21

Text Bottom Border Animation on Hover

2.5.20

@Media Prefers Dark/Light

11.21.19

Email Address Input Validation

12.15.23

Remove https:// From Text Link

9.5.23

Run Javascript on Mobile Only

7.26.23

Validate HTML Inputs w/ Pattern Attribute

5.4.23

Detect and Don't Redirect Search Bots

2.28.23

Randomize Button Text on Click

1.12.23

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.

Subscribe