do not animate for prefers reduced motion

justeattakeaway · Jul 23, 2024 · 193d756 · 193d756
1 parent fba6022
commit 193d756
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/packages/components/pie-cookie-banner/src/cookie-banner.scss b/packages/components/pie-cookie-banner/src/cookie-banner.scss
@@ -47,13 +47,15 @@ $breakpoint-wide: 700px;
         display: none;
     }
 
-    @keyframes animate-enter {
-        0% { transform: translate3d(0, 75%, 0); }
+    @media (prefers-reduced-motion: no-preference) {
+        @keyframes animate-enter {
+            0% { transform: translate3d(0, 75%, 0); }
 
-        100% { transform: translate3d(0, 0, 0); }
-    }
+            100% { transform: translate3d(0, 0, 0); }
+        }
 
-    animation: 0.5s animate-enter ease-out;
+        animation: 0.5s animate-enter ease-out;
+    }
 }
 
 .c-cookieBanner-title,