A11y: Update animation/transition styles with reduced motion media qu…

…eries

packages/block-library/src/image/style.scss

@@ -167,7 +167,9 @@
 		text-align: center;
 		padding: 0;
 		border-radius: 4px;
-		transition: opacity 0.2s ease;
+		@media not ( prefers-reduced-motion ) {
+			transition: opacity 0.2s ease;
+		}
 
 		&:focus-visible {
 			outline: 3px auto rgb(90 90 90 / 25%);
@@ -280,16 +282,24 @@
 	// or faster than the scrim to give a sense of depth.
 	&.active {
 		visibility: visible;
-		animation: both turn-on-visibility 0.25s;
+		@media not ( prefers-reduced-motion ) {
+			animation: both turn-on-visibility 0.25s;
+		}
 		img {
-			animation: both turn-on-visibility 0.35s;
+			@media not ( prefers-reduced-motion ) {
+				animation: both turn-on-visibility 0.35s;
+			}
 		}
 	}
 	&.show-closing-animation {
 		&:not(.active) {
-			animation: both turn-off-visibility 0.35s;
+			@media not ( prefers-reduced-motion ) {
+				animation: both turn-off-visibility 0.35s;
+			}
 			img {
-				animation: both turn-off-visibility 0.25s;
+				@media not ( prefers-reduced-motion ) {
+					animation: both turn-off-visibility 0.25s;
+				}
 			}
 		}
 	}