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.
This commit is contained in:
Peter Cai 2020-04-14 16:47:27 +08:00
parent 0dbd4cbf08
commit df6a1affdb
No known key found for this signature in database
GPG key ID: 71F5FB4E4F3FD54F
2 changed files with 14 additions and 2 deletions

View file

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

View file

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