diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 0f230f0f61..787d33ddc2 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -40,6 +40,14 @@ $button-gap: 24px;
 
 .mx_ImageView_image {
     flex-shrink: 0;
+
+    &.mx_ImageView_image_animating {
+        transition: transform 200ms ease 0s;
+    }
+
+    &.mx_ImageView_image_animatingLoading {
+        transition: transform 300ms ease 0s;
+    }
 }
 
 .mx_ImageView_panel {
@@ -130,3 +138,13 @@ $button-gap: 24px;
         mask-size: 40%;
     }
 }
+
+@media (prefers-reduced-motion) {
+    .mx_ImageView_image_animating {
+        transition: none !important;
+    }
+
+    .mx_ImageView_image_animatingLoading {
+        transition: none !important;
+    }
+}
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 1b666eed99..44ff6644d7 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -412,10 +412,10 @@ export default class ImageView extends React.Component<IProps, IState> {
         const showEventMeta = !!this.props.mxEvent;
         const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
 
-        let transition;
-        if (this.animatingLoading) transition = "transform 300ms ease 0s";
-        else if (this.state.moving || !this.imageIsLoaded) transition = null;
-        else transition = "transform 200ms ease 0s";
+        let transitionClassName;
+        if (this.animatingLoading) transitionClassName = "mx_ImageView_image_animatingLoading";
+        else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
+        else transitionClassName = "mx_ImageView_image_animating";
 
         let cursor;
         if (this.state.moving) cursor = "grabbing";
@@ -433,7 +433,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         // image causing it translate in the wrong direction.
         const style = {
             cursor: cursor,
-            transition: transition,
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoom})
@@ -581,7 +580,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                         style={style}
                         alt={this.props.name}
                         ref={this.image}
-                        className="mx_ImageView_image"
+                        className={`mx_ImageView_image ${transitionClassName}`}
                         draggable={true}
                         onMouseDown={this.onStartMoving}
                     />