diff --git a/src/App.css b/src/App.css
index 9a254dbb..323bf51d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,7 +25,12 @@ body.overlay-open {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 400ms ease-out;
+}
+
+body.overlay-open .overlay {
+  background: rgba(0, 0, 0, 0.9);
 }
 
 #close-modal {
diff --git a/src/Overlay.js b/src/Overlay.js
index 2c1c8872..86527982 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -15,7 +15,12 @@ class Overlay extends React.Component {
 
   componentDidMount() {
     window.document.addEventListener("keydown", this._handleKeyDown);
-    document.body.classList.add("overlay-open");
+    // TODO: This is technically a race condition, since we could unmount before this fires.
+    requestAnimationFrame(() => {
+      // This does not seem to work the first time.
+      // This should _not_ work on page load
+      document.body.classList.add("overlay-open");
+    });
   }
 
   componentWillUnmount() {