25% off ProSNIPC25OFF

Respect prefers-reduced-motion

Disables CSS animations and transitions for users who have enabled the reduce-motion accessibility setting in their operating system.

CSSby SnipCraft
css
/* Honour the OS-level "Reduce Motion" preference.
   Users who find motion distracting or who have vestibular disorders
   will see animations and transitions disabled or replaced with simple fades. */

@media ( prefers-reduced-motion: reduce ) {
    /* Disable all animations and transitions globally */
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        transition-delay:          0ms    !important;
        scroll-behavior:           auto   !important;
    }
}

/* Smooth scrolling only when motion is acceptable */
@media ( prefers-reduced-motion: no-preference ) {
    html {
        scroll-behavior: smooth;
    }
}

/* AOS (Animate on Scroll) — prevent invisible locked elements */
@media ( prefers-reduced-motion: reduce ) {
    [data-aos] {
        opacity:    1         !important;
        transform:  none      !important;
        transition: none      !important;
    }
}

/* Allow a gentle opacity fade as a safe alternative to motion */
@media ( prefers-reduced-motion: reduce ) {
    .fade-in {
        animation: none;
        opacity: 1;
    }
}
#accessibility#animation#css#motion