Prevent animations with prefers-reduced-motion (#7757)

* Prevent animations with prefers-reduced-motion * Also disable animations in the fallback * Change select to target elements
withastro · Jul 21, 2023 · c2d6cfd · c2d6cfd
1 parent 471324b
commit c2d6cfd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/poor-cameras-tell.md b/.changeset/poor-cameras-tell.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent animations when prefers-reduced-motion
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
@@ -42,3 +42,15 @@
 		transform: translateX(-100%);
 	}
 }
+
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+
+	[data-astro-transition-scope] {
+		animation: none !important;
+	}
+}