From 147e9bb43a6fccb0793d9d06303502c4462136cf Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 3 Jan 2025 11:42:17 +0530
Subject: [PATCH] Animate: Standardize reduced motion handling using media
 queries

---
 packages/components/src/animate/style.scss | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
index 1d64423e42f1f0..4467a8c325242a 100644
--- a/packages/components/src/animate/style.scss
+++ b/packages/components/src/animate/style.scss
@@ -1,7 +1,8 @@
 .components-animate__appear {
-	animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
+		animation-fill-mode: forwards;
+	}
 
 	&.is-from-top,
 	&.is-from-top.is-from-left {
@@ -29,9 +30,10 @@
 }
 
 .components-animate__slide-in {
-	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+		animation-fill-mode: forwards;
+	}
 
 	&.is-from-left {
 		transform: translateX(+100%);
@@ -49,7 +51,9 @@
 }
 
 .components-animate__loading {
-	animation: components-animate__loading 1.6s ease-in-out infinite;
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__loading 1.6s ease-in-out infinite;
+	}
 }
 
 @keyframes components-animate__loading {