diff --git a/builder.js b/builder.js
index a3c9a35..721b071 100644
--- a/builder.js
+++ b/builder.js
@@ -452,8 +452,11 @@ function calculateBuild(save_skp, skp){
         }
         document.getElementById("level-choice").value = level;
 
-        for (let i of document.getElementsByClassName("hide-container")) {
-			i.style.visibility = "visible";
+        for (let i of document.getElementsByClassName("hide-container-block")) {
+			i.style.display = "block";
+        }
+        for (let i of document.getElementsByClassName("hide-container-grid")) {
+			i.style.display = "grid";
 		}
 
         player_build = new Build(level, equipment, powderings, new Map());
diff --git a/display.js b/display.js
index cf73715..4da9ef4 100644
--- a/display.js
+++ b/display.js
@@ -105,9 +105,9 @@ function displaySetBonuses(parent_id,build) {
     parent_div.append(set_summary_elem);
     
     if (build.activeSetCounts.size) {
-        parent_div.parentElement.style.visibility = "visible";
+        parent_div.parentElement.style.display = "block";
     } else {
-        parent_div.parentElement.style.visibility = "hidden";
+        parent_div.parentElement.style.display = "none";
     }
 
     for (const [setName, count] of build.activeSetCounts) {
diff --git a/index.html b/index.html
index 99b2a8c..5c121da 100644
--- a/index.html
+++ b/index.html
@@ -393,13 +393,13 @@
                     </div>
                 </div>
             </div>
-            <div class="build-overall-container hide-container" style="visibility: hidden;">
+            <div class="build-overall-container hide-container-block" style="display: none;">
                 <div class = "center build-overall" id = "build-overall">
                     <br/>
                     <div class = "center" id = "build-overall-stats"></div>
                 </div>
             </div>
-            <div class="spell-info-container hide-container" style="visibility: hidden;">
+            <div class="spell-info-container hide-container-block" style="display: none;">
                 <div class="spell-info">
                     <div class="center" id="build-melee-statsAvg">melee</div>
                 </div>
@@ -497,7 +497,7 @@
                 Update Stats
             </button>
         </div>
-        <div class = "build">
+        <div class = "build hide-container-grid" style="display: none;">
             <div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">
                 <div class = "center" id = "build-helmet-stats"></div>
             </div>
@@ -532,7 +532,7 @@
             <div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-item-12">
             </div>
         </div>
-        <div class = "spells">
+        <div class = "spells hide-container-grid" style="display: none;">
             <div class = "center spell-info" id = "spell0" style = "grid-item-1">
                 <!--div class = "center" id = "spell0-name">Spell 1</div-->
                 <div class = "center" id = "spell0-info">Spell 1</div>
@@ -551,7 +551,7 @@
             </div>
         </div>
         <div class="misc">
-            <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1;visibility:hidden;">
+            <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
                 <div class = "center" id = "set-info">Set info</div>
             </div>
             <div class = "center int-info" id = "int-info-div" style = "grid-column:4;grid-row:1;visibility:visible;">
diff --git a/narrow.css b/narrow.css
index f2695f6..c1bac21 100644
--- a/narrow.css
+++ b/narrow.css
@@ -33,3 +33,35 @@
 .skp-input {
 
 }
+
+.hide-container-block {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.hide-container-grid {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.set-info-div {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/wide.css b/wide.css
index c1672c9..39fb232 100644
--- a/wide.css
+++ b/wide.css
@@ -30,3 +30,35 @@
 .skp-input {
 
 }
+
+.hide-container-block {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.hide-container-grid {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.set-info-div {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}