From a45c67a2674f756f47c88171023076a0d3e65e7d Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 09:47:17 +0530
Subject: [PATCH 01/18] Button: Standardize reduced motion handling using media
 queries

---
 packages/components/src/button/style.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 460aeaa2781cd..cd75e3d39cf79 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -15,8 +15,11 @@
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
@@ -245,10 +248,13 @@
 		text-align: left;
 		color: $components-color-accent;
 		text-decoration: underline;
-		transition-property: border, background, color;
-		transition-duration: 0.05s;
-		transition-timing-function: ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition-property: border, background, color;
+			transition-duration: 0.05s;
+			transition-timing-function: ease-in-out;
+		}
+
 		height: auto;
 
 		&:focus {

From 72773ccbf95312b3c5b060c95b568f5be0d61e69 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 11:59:18 +0530
Subject: [PATCH 02/18] Button: Standardize animation reduced motion handling
 using media queries

---
 packages/components/src/button/style.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index cd75e3d39cf79..f1b666999f003 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -281,11 +281,8 @@
 	&.is-secondary.is-busy,
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
-		animation: components-button__busy-animation 2500ms infinite linear;
-		// This should be refactored to use the reduce-motion("animation") mixin
-		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
-		@media (prefers-reduced-motion: reduce) {
-			animation-duration: 0s;
+		@media not (prefers-reduced-motion) {
+			animation: components-button__busy-animation 2500ms infinite linear;
 		}
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */

From 3872568cbd0d63c28b32c0a0f69ad8570e3bef19 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 12:38:14 +0530
Subject: [PATCH 03/18] CheckboxControl: Standardize reduced motion handling
 using media queries

---
 packages/components/src/checkbox-control/style.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 25394ba645ee8..63cd023302bcb 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -32,8 +32,10 @@
 	height: var(--checkbox-input-size);
 
 	appearance: none;
-	transition: 0.1s border-color ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s border-color ease-in-out;
+	}
 
 	&:focus {
 		@include button-style-outset__focus(var(--wp-admin-theme-color));

From 8d46aed94a86fb9ee3aefcea9d1f9b0a122c125c Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 14:16:55 +0530
Subject: [PATCH 04/18] CircularOptionPicker: Standardize reduced motion
 handling using media queries

---
 .../src/circular-option-picker/style.scss          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index e47764a3a60d7..d62164cbf3122 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -35,9 +35,12 @@ $color-palette-circle-spacing: 12px;
 	width: $color-palette-circle-size;
 	vertical-align: top;
 	transform: scale(1);
-	transition: 100ms transform ease;
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms transform ease;
+	}
+
 	will-change: transform;
-	@include reduce-motion("transition");
 
 	&:hover {
 		transform: scale(1.2);
@@ -73,8 +76,11 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
-	transition: 100ms box-shadow ease;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms box-shadow ease;
+	}
+
 	cursor: pointer;
 
 	&:hover {

From 386c259c9e06fbfd412901ed7fc3947a9fe12c5f Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 14:45:07 +0530
Subject: [PATCH 05/18] FormToggle: Standardize reduced motion handling using
 media queries

---
 .../components/src/form-toggle/style.scss     | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 900874b59004b..8ae46d2355827 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -24,10 +24,13 @@ $transition-duration: 0.2s;
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: math.div($toggle-height, 2);
-		transition:
-			$transition-duration background-color ease,
-			$transition-duration border-color ease;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				$transition-duration background-color ease,
+				$transition-duration border-color ease;
+		}
+
 		overflow: hidden;
 
 		// Windows High Contrast Mode
@@ -39,8 +42,9 @@ $transition-duration: 0.2s;
 			// Expand the border to fake a solid in Windows High Contrast Mode.
 			border-top: #{ $toggle-height } solid transparent;
 
-			transition: $transition-duration opacity ease;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: $transition-duration opacity ease;
+			}
 
 			opacity: 0;
 		}
@@ -55,10 +59,13 @@ $transition-duration: 0.2s;
 		width: $toggle-thumb-size;
 		height: $toggle-thumb-size;
 		border-radius: $radius-round;
-		transition:
-			$transition-duration transform ease,
-			$transition-duration background-color ease-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				$transition-duration transform ease,
+				$transition-duration background-color ease-out;
+		}
+
 		background-color: $gray-900;
 		box-shadow: $elevation-x-small;
 

From 2c421b01471a1a619ade76bd10110696412606d4 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 14:55:31 +0530
Subject: [PATCH 06/18] FormTokenField: Standardize reduced motion handling
 using media queries

---
 packages/components/src/form-token-field/style.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index d18ca274d7676..40e5aca989fbe 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -124,8 +124,10 @@
 	height: auto;
 	background: $gray-300;
 	min-width: unset;
-	transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
-	@include reduce-motion;
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
+	}
 }
 
 .components-form-token-field__token-text {
@@ -154,8 +156,11 @@
 	min-width: 100%;
 	max-height: $grid-unit-80 * 2;
 	overflow-y: auto;
-	transition: all 0.15s ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-in-out;
+	}
+
 	list-style: none;
 	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;

From 7105494012a64e8cb6486159bbcc70852d118434 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 15:05:23 +0530
Subject: [PATCH 07/18] Panel: Standardize reduced motion handling using media
 queries

---
 packages/components/src/panel/style.scss | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index e525cd9256918..3aff9d24b079f 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -62,9 +62,12 @@
 	font-size: inherit;
 	margin-top: 0;
 	margin-bottom: 0;
-	transition: 0.1s background ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s background ease-in-out;
+	}
 }
+
 .components-panel__body.is-opened > .components-panel__body-title {
 	margin: -1 * $grid-unit-20;
 	margin-bottom: 5px;
@@ -87,8 +90,11 @@
 	color: $gray-900;
 	border: none;
 	box-shadow: none;
-	transition: 0.1s background ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s background ease-in-out;
+	}
+
 	height: auto;
 
 	&:focus {
@@ -103,8 +109,10 @@
 		transform: translateY(-50%);
 		color: $gray-900;
 		fill: currentColor;
-		transition: 0.1s color ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: 0.1s color ease-in-out;
+		}
 	}
 
 	// mirror the arrow horizontally in RTL languages

From c863a536d75ee701102cdcc650c8244bb62ca859 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 16:30:37 +0530
Subject: [PATCH 08/18] Placeholder: Standardize reduced motion handling using
 media queries

---
 packages/components/src/placeholder/style.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index a38d7d3e3ace8..84e0ecfa1f985 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -173,8 +173,10 @@
 	.components-button {
 		opacity: 0;
 		pointer-events: none;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	.is-selected > & {

From f9a5c9b0a45c16b734c596bcda247feed413392d Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Thu, 2 Jan 2025 13:31:13 +0530
Subject: [PATCH 09/18] ResizableBox: Standardize reduced motion handling using
 media queries

---
 .../components/src/resizable-box/style.scss   | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 4db3d27b5fab6..753a0965bce50 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -60,8 +60,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	position: absolute;
 	top: calc(50% - 1px);
 	right: calc(50% - 1px);
-	transition: transform 0.1s ease-in;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: transform 0.1s ease-in;
+	}
+
 	will-change: transform;
 	opacity: 0;
 }
@@ -102,18 +105,20 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
-	animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
+		animation-fill-mode: forwards;
+	}
 }
 
 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
-	animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
+		animation-fill-mode: forwards;
+	}
 }
 
 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.

From bdb3f8d8cd13695c01e157c17eac7d0c9a0c174b Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Thu, 2 Jan 2025 14:18:14 +0530
Subject: [PATCH 10/18] TabPanel: Standardize reduced motion handling using
 media queries

---
 packages/components/src/tab-panel/style.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index b54f7af1bf4de..7e811b21b65b6 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -40,8 +40,9 @@
 		border-radius: 0;
 
 		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s linear;
+		}
 	}
 
 	// Active.
@@ -68,8 +69,9 @@
 		border-radius: $radius-small;
 
 		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s linear;
+		}
 	}
 
 	&:focus-visible::before {

From 90804a242a356b75ab5a6827a51bc25deaf8db77 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Thu, 2 Jan 2025 14:32:42 +0530
Subject: [PATCH 11/18] DropZoneComponent: Standardize reduced motion handling
 using media queries

---
 packages/components/src/drop-zone/style.scss | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index d66eaee87b8a1..4c2da2df0b4a5 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -46,9 +46,8 @@
 		.components-drop-zone__content {
 			opacity: 1;
 
-			transition: opacity 0.2s ease-in-out;
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition: opacity 0.2s ease-in-out;
 			}
 		}
 
@@ -56,12 +55,10 @@
 			opacity: 1;
 			transform: scale(1);
 
-			transition:
-				opacity 0.1s ease-in-out 0.1s,
-				transform 0.1s ease-in-out 0.1s;
-
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition:
+					opacity 0.1s ease-in-out 0.1s,
+					transform 0.1s ease-in-out 0.1s;
 			}
 		}
 	}

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 12/18] 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 1d64423e42f1f..4467a8c325242 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 {

From 7ea07527f9228f828d04742b154147a4b0ff65b9 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 3 Jan 2025 13:29:58 +0530
Subject: [PATCH 13/18] Modal: Standardize reduced motion handling using media
 queries

---
 packages/components/src/modal/style.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 70959f69392d1..de35d46a704d7 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -33,10 +33,12 @@
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
-	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
-	@include reduce-motion("animation");
+
+	@media not (prefers-reduced-motion) {
+		animation-duration: var(--modal-frame-animation-duration);
+	}
 
 	.components-modal__screen-overlay.is-animating-out & {
 		animation-name: components-modal__disappear-animation;

From fb9f4ee6e032ae6603803fb9dccec837a39289c6 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 3 Jan 2025 14:02:31 +0530
Subject: [PATCH 14/18] Toolbar: Standardize reduced motion handling using
 media queries

---
 packages/components/src/toolbar/toolbar/style.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index c0cabacb84c77..b53df6303e0fb 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -56,9 +56,10 @@
 			z-index: -1;
 
 			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not (prefers-reduced-motion) {
+				animation: components-button__appear-animation 0.1s ease;
+				animation-fill-mode: forwards;
+			}
 		}
 
 		svg {

From 3ab4762915f0592c5196f8ce941899e8f1936bed Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 3 Jan 2025 20:53:17 +0530
Subject: [PATCH 15/18] Animate: Fix stuck animation for slide-in animation

---
 packages/components/src/animate/style.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
index 4467a8c325242..0375b116a552f 100644
--- a/packages/components/src/animate/style.scss
+++ b/packages/components/src/animate/style.scss
@@ -33,14 +33,14 @@
 	@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%);
-	}
+		&.is-from-left {
+			transform: translateX(+100%);
+		}
 
-	&.is-from-right {
-		transform: translateX(-100%);
+		&.is-from-right {
+			transform: translateX(-100%);
+		}
 	}
 }
 

From 8b7c52ef891138af567774867a354d7b86f0b9ce Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Mon, 6 Jan 2025 12:34:30 +0530
Subject: [PATCH 16/18] Components: Move will-change inside media query for
 transform optimization

- ResizableBox: Optimized transform.
- CircularOptionPicker: Optimized transform.
---
 packages/components/src/circular-option-picker/style.scss | 3 +--
 packages/components/src/resizable-box/style.scss          | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index d62164cbf3122..5cbedb4f89053 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -38,10 +38,9 @@ $color-palette-circle-spacing: 12px;
 
 	@media not (prefers-reduced-motion) {
 		transition: 100ms transform ease;
+		will-change: transform;
 	}
 
-	will-change: transform;
-
 	&:hover {
 		transform: scale(1.2);
 	}
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 753a0965bce50..a9ff7ea237e5f 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -63,9 +63,9 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 
 	@media not (prefers-reduced-motion) {
 		transition: transform 0.1s ease-in;
+		will-change: transform;
 	}
 
-	will-change: transform;
 	opacity: 0;
 }
 

From bae80ef22fc06c6ec8c5e966758d8af2d2a8f05e Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Mon, 6 Jan 2025 13:00:52 +0530
Subject: [PATCH 17/18] Components: Update CHANGELOG for reduced motion
 standardization

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9784a65102795..9380f12434ab8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -34,6 +34,7 @@
 -   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
 -   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
 -   `SlotFill`: register slots in a layout effect ([#68176](https://github.com/WordPress/gutenberg/pull/68176)).
+-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
 
 ## 29.0.0 (2024-12-11)
 

From e2c44b0e942092c6819b3347166224ac48b7f5fe Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 7 Jan 2025 14:33:16 +0530
Subject: [PATCH 18/18] Components: Move CHANGELOG entry to Unreleased section

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d0550e1400107..46d8f26894128 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
+
 ## 29.1.0 (2025-01-02)
 
 ### Enhancements
@@ -37,7 +41,6 @@
 -   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
 -   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
 -   `SlotFill`: register slots in a layout effect ([#68176](https://github.com/WordPress/gutenberg/pull/68176)).
--   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
 
 ## 29.0.0 (2024-12-11)