useReducedMotion

useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.

Users can experience distraction or nausea from animated content. For example, scrolling a page which causes elements to move (other than the essential movement associated with scrolling) can trigger vestibular disorders.

Change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.

References:

Examples

To test the example below, change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.