support prefers-reduced-motion

CeviBuroAarau · Mar 18, 2021 · 250fa5d · 250fa5d
1 parent fac1a7d
commit 250fa5d
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -1,3 +1,13 @@
 @import '~bulma/bulma';
 @import '~leaflet/dist/leaflet.css';
 @import '~leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses 
+
+// "disable" animations for people that wish this
+@media screen and (prefers-reduced-motion: reduce) {  
+  * {
+    /* Very short durations means JavaScript that relies on events still works */
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}