diff options
| author | Peter Cai <[email protected]> | 2020-04-14 16:47:27 +0800 |
|---|---|---|
| committer | Peter Cai <[email protected]> | 2020-04-14 16:47:27 +0800 |
| commit | df6a1affdb556013849e3ce74f3eaaf4059f2949 (patch) | |
| tree | 25e8c203cf6a691ffba61bc86c91a1ae0a25d381 | |
| parent | 0dbd4cbf087f1e30060b677e678659019a12f4b9 (diff) | |
| download | paprika-df6a1affdb556013849e3ce74f3eaaf4059f2949.tar.gz | |
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.
| -rw-r--r-- | theme/default/inline_style.hbs | 1 | ||||
| -rw-r--r-- | 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; +} + [email protected] appear { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } .loading-progress { |