diff --git a/gulpfile.js b/gulpfile.js
index 9bb6f394..e50344cc 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -75,6 +75,7 @@ const cssFiles = [
 const jsFiles = [
   path.src + '/js/helper.js',
   path.src + '/js/data.js',
+  path.src + '/js/ready.js',
   path.src + '/js/fontawesome.js',
   path.src + '/js/update.js',
   path.src + '/js/state.js',
diff --git a/src/css/background.css b/src/css/background.css
index 4ace61b5..69cf2d1b 100755
--- a/src/css/background.css
+++ b/src/css/background.css
@@ -6,7 +6,6 @@
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-background);
-  animation: appear var(--layout-timing-medium) 1;
   display: none;
 }
 
diff --git a/src/css/base.css b/src/css/base.css
index 74908f2c..02c475e5 100755
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -20,6 +20,12 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  opacity: 0;
+  transition: opacity var(--layout-timing-fast);
+}
+
+.is-ready body {
+  opacity: 1;
 }
 
 html.is-background-color-by-theme,
diff --git a/src/html/script-js.html b/src/html/script-js.html
index dfce2ead..8d1bd965 100644
--- a/src/html/script-js.html
+++ b/src/html/script-js.html
@@ -7,6 +7,7 @@
 <!-- nightTab -->
 <script src="js/helper.js"></script>
 <script src="js/data.js"></script>
+<script src="js/ready.js"></script>
 <script src="js/fontawesome.js"></script>
 <script src="js/update.js"></script>
 <script src="js/state.js"></script>
diff --git a/src/js/init.js b/src/js/init.js
index 5b4db7ec..21f913d0 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -1,5 +1,6 @@
 // log version
 console.log("nightTab version", version.get().number, version.get().name);
+ready.init();
 data.init();
 state.init();
 header.init();
diff --git a/src/js/ready.js b/src/js/ready.js
new file mode 100644
index 00000000..1e914ee6
--- /dev/null
+++ b/src/js/ready.js
@@ -0,0 +1,36 @@
+var ready = (function() {
+
+  var bind = {};
+
+  bind.loaded = {
+    func: function() {
+      render.loaded();
+      bind.loaded.remove();
+    },
+    add: function() {
+      window.addEventListener("load", bind.loaded.func, false);
+    },
+    remove: function() {
+      window.removeEventListener("load", bind.loaded.func);
+    }
+  };
+
+  var render = {};
+
+  render.loaded = function() {
+    var html = helper.e("html");
+    helper.addClass(html, "is-ready");
+  };
+
+  var init = function() {
+    bind.loaded.add();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    bind: bind,
+    render: render
+  };
+
+})();