feat: use fade-in css class where applicable

src/css/home.scss

@@ -9,8 +9,7 @@
   border-radius: 100%;
   display: inline-block;
   margin-bottom: 40px;
-  vertical-align: top;
-  animation: fade-in-opacity 0.5s
+  vertical-align: top
 }
 
 .logo {
@@ -59,7 +58,6 @@
   }
 
   > div {
-    animation: fade-in-opacity 0.5s;
     margin: 0.75rem !important;
 
     &:first-child {
@@ -106,19 +104,14 @@
   margin-top: 5px
 }
 
-#albumDiv {
-  animation: fade-in-opacity 0.5s;
-
-  .control {
-    text-align: inherit
-  }
+#albumDiv .control {
+  text-align: inherit
 }
 
 #linksColumn {
   margin-top: -0.25rem;
   margin-left: -0.25rem;
   margin-right: -0.25rem;
-  animation: fade-in-opacity 0.5s;
 
   .column {
     padding: 0.25rem
@@ -141,11 +134,9 @@
 
 #tabs {
   margin-bottom: 1rem;
-  animation: fade-in-opacity 0.5s;
 
   .tab-content {
-    margin-bottom: -0.75rem;
-    animation: fade-in-opacity 0.5s
+    margin-bottom: -0.75rem
   }
 }
 

views/dashboard.njk

@@ -35,7 +35,7 @@
 
 {% block content %}
 {{ super() }}
-<section id="dashboard" class="section is-hidden">
+<section id="dashboard" class="section is-hidden anim-fade-in">
   <div id="panel" class="container">
     <h1 class="title">
       Dashboard

views/home.njk

@@ -68,7 +68,7 @@
         <div class="column is-hidden-mobile"></div>
         <div class="column">
           <a id="loginToUpload" class="button is-danger is-outlined is-fullwidth is-loading is-wrappable"></a>
-          <div id="albumDiv" class="field has-addons is-hidden">
+          <div id="albumDiv" class="field has-addons is-hidden anim-fade-in">
             <div class="control is-expanded">
               <div class="select is-fullwidth">
                 <select id="albumSelect">
@@ -157,7 +157,7 @@
       </div>
 
       <div id="tpl" class="is-hidden">
-        <div class="field">
+        <div class="field anim-fade-in">
           <i class="icon is-hidden"></i>
           <img class="is-unselectable is-hidden">
           <p class="name"></p>