diff --git a/res/css/_common.scss b/res/css/_common.scss
index b128a82442..066bbea510 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -315,9 +315,20 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     opacity: 0.4;
 }
 
+@keyframes mx_Dialog_lightbox_background_keyframes {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: $lightbox-background-bg-opacity;
+    }
+}
+
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: $lightbox-background-bg-opacity;
     background-color: $lightbox-background-bg-color;
+    animation-name: mx_Dialog_lightbox_background_keyframes;
+    animation-duration: 0.25s;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {