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

@@ -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 {

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 {