diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index 46e1c30e8a..b153331801 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -36,18 +36,18 @@ import 'css!./style';
             imgData.data.set(pixels);
             ctx.putImageData(imgData, 0, 0);
 
-            let child = target.parentNode.insertBefore(canvas, target);
-            child.classList.add('blurhash-canvas');
-            if (userSettings.enableFastFadein()) {
-                child.classList.add('lazy-blurhash-fadein-fast');
-            } else {
-                child.classList.add('lazy-blurhash-fadein');
-            }
+            requestAnimationFrame(() => {
+                canvas.classList.add('blurhash-canvas');
+                if (userSettings.enableFastFadein()) {
+                    canvas.classList.add('lazy-blurhash-fadein-fast');
+                } else {
+                    canvas.classList.add('lazy-blurhash-fadein');
+                }
 
-            child.style.opacity = 1;
-
-            target.classList.add('blurhashed');
-            target.removeAttribute('data-blurhash');
+                target.parentNode.insertBefore(canvas, target);
+                target.classList.add('blurhashed');
+                target.removeAttribute('data-blurhash');
+            });
         }
     }
 
diff --git a/src/components/images/style.css b/src/components/images/style.css
index e4c706221f..af982f1582 100644
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@@ -12,12 +12,22 @@
     opacity: 0;
 }
 
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
 .lazy-blurhash-fadein-fast {
-    transition: opacity 0.2s;
+    animation: fadein 0.2s;
 }
 
 .lazy-blurhash-fadein {
-    transition: opacity 0.7s;
+    animation: fadein 0.7s;
 }
 
 .blurhash-canvas {