diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index d62164cbf3122b..5cbedb4f89053a 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 753a0965bce507..a9ff7ea237e5f6 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;
 }