Guard placeholder glow/wave animations behind prefers-reduced-motion (#42769)

diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index 6e32e1cdb9b143cacbc44888700d3bdba447f3f1..05e753931916dc0c020d033396ae730720f5a060 100644 (file)
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -29,6 +29,12 @@
 .placeholder-glow {
   .placeholder {
     animation: placeholder-glow 2s ease-in-out infinite;
+
+    @if $enable-reduced-motion {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
   }
 }
 
@@ -42,6 +48,12 @@
   mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
   mask-size: 200% 100%;
   animation: placeholder-wave 2s linear infinite;
+
+  @if $enable-reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
 }
 
 @keyframes placeholder-wave {