diff --git a/mail/themes/shared/mail/messenger.css b/mail/themes/shared/mail/messenger.css
index 4e76eb1119..095d40ecb8 100644
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -1571,7 +1571,6 @@ iframe.devtools-highlighter-renderer {
 }
 
 .previewRendering {
-  background-image: url("chrome://browser/skin/tabbrowser/pendingpaint.png");
   background-repeat: no-repeat;
   background-size: 60px 60px;
   background-position: center center;
@@ -1588,7 +1587,6 @@ iframe.devtools-highlighter-renderer {
 .printPreviewBrowser {
   visibility: collapse;
   opacity: 1;
-  transition: opacity 60ms;
 }
 
 .previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
@@ -1599,7 +1597,6 @@ iframe.devtools-highlighter-renderer {
 
 .previewStack[rendering=true] > .printPreviewBrowser {
   opacity: 0;
-  transition: opacity 1ms 250ms;
 }
 
 .print-pending-label {
@@ -1609,12 +1606,10 @@ iframe.devtools-highlighter-renderer {
 
 printpreview-pagination {
   opacity: 0;
-  transition: opacity 100ms 500ms;
 }
 printpreview-pagination:focus-within,
 .previewStack:hover printpreview-pagination {
   opacity: 1;
-  transition: opacity 100ms;
 }
 .previewStack[rendering=true] printpreview-pagination {
   opacity: 0;
@@ -1627,6 +1622,29 @@ printpreview-pagination:focus-within,
   }
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .previewRendering {
+    background-image: url("chrome://browser/skin/tabbrowser/pendingpaint.png");
+  }
+
+  .printPreviewBrowser {
+    transition: opacity 60ms;
+  }
+
+  .previewStack[rendering=true] > .printPreviewBrowser {
+    transition: opacity 1ms 250ms;
+  }
+
+  printpreview-pagination {
+    transition: opacity 100ms 500ms;
+  }
+
+  printpreview-pagination:focus-within,
+  .previewStack:hover printpreview-pagination {
+    transition: opacity 100ms;
+  }
+}
+
 .dialogStack {
   /* Should outrank the z-index values of other UI elements, particularly the devtools
      splitter element. */