Page Comparison

...

Add the following CSS media query to the site.

/* Reduce animations if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element 
  /* CSS to disable motion goes here */

}

...

{
    transition: none;
    transform: none;
  }
}

Users can set their OS to indicate their motion preference. 

...

The 'prefers-reduced-motion' CSS Media Query will respect that choice. 

Common motion preference styles to incorporate to the media query:

Disabling Animations and Transitions

Reduce or eliminate animations and transitions to prevent motion sickness or discomfort.

@media (prefers-reduced-motion: reduce) {

{
animation: none !important;
transition: none !important;
}
}

Simplifying Parallax Effects

Parallax effects can be dizzying for some users. Simplify or disable them.

@media (prefers-reduced-motion: reduce) {
.parallax {
background-attachment: scroll;
}
}

Adjusting Scrolling Effects

Smooth scrolling can be disorienting for some users. Turn it off.

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

Reducing Complex Animations

For complex animations, such as slideshows or carousels, consider reducing the motion or providing alternative transitions.

@media (prefers-reduced-motion: reduce) {
.slideshow {
animation: none;
}
.carousel-item {
transition: opacity 1s ease-in-out;
}
}

Disabling Animated GIFs

Animated GIFs can be distracting or cause discomfort. Replace them with static images.

@media (prefers-reduced-motion: reduce) {
.animated-gif {
content: url('static-image.png');
}
}

Simplifying SVG Animations

SVG animations can be intricate and distracting. Disable or simplify them.

@media (prefers-reduced-motion: reduce) {
svg {
animation: none;
}
}
7. Adjusting Video Autoplay
Prevent videos from autoplaying to reduce unexpected motion.

css
Copy code
@media (prefers-reduced-motion: reduce) {
video {
autoplay: false;
}
}
8. Reducing Text Effects
Text animations, like typewriter effects, can be reduced or disabled.

css
Copy code
@media (prefers-reduced-motion: reduce) {
.typewriter-effect {
animation: none;
}
}
9. Minimizing Hover Effects
Hover effects can sometimes be too dynamic. Simplify them.

css
Copy code
@media (prefers-reduced-motion: reduce) {
.hover-effect {
transition: background-color 0.2s ease-in-out;
}
}
10. Disabling Scroll Animations
Scroll-triggered animations can be disorienting. Disable them.

css
Copy code
@media (prefers-reduced-motion: reduce) {
.scroll-animation {
animation: none;
}
}

Please see additional information.

...