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