From df6a1affdb556013849e3ce74f3eaaf4059f2949 Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Tue, 14 Apr 2020 16:47:27 +0800
Subject: [PATCH] theme: animate page entrance using css animation instead of
 transition

the transition trick relies on the browser loading the css after the
html, which may not be true.
---
 theme/default/inline_style.hbs |  1 -
 theme/default/static/style.css | 15 ++++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/theme/default/inline_style.hbs b/theme/default/inline_style.hbs
index 1a99c15..a010477 100644
--- a/theme/default/inline_style.hbs
+++ b/theme/default/inline_style.hbs
@@ -6,7 +6,6 @@
     /* Do not show content until the main CSS is loaded (which overrides opacity) */
     .page-wrapper {
         opacity: 0;
-        transition: opacity 0.5s ease-in-out;
     }
 
     .loading-progress {
diff --git a/theme/default/static/style.css b/theme/default/static/style.css
index 892aea6..46efaa6 100644
--- a/theme/default/static/style.css
+++ b/theme/default/static/style.css
@@ -18,8 +18,21 @@ html {
     background-repeat: repeat;
 }
 
+/* Animate page appearing */
 .page-wrapper {
-    opacity: 1 !important;
+    animation-name: appear;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes appear {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 .loading-progress {