Add fade-in effect (#1)

QubitPi · Dec 10, 2024 · b3131a6 · b3131a6
1 parent e67e7c6
commit b3131a6
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/src/App.css b/src/App.css
@@ -20,6 +20,44 @@
   gap: 5rem;
 
   padding: 0.5rem 1rem;
+
+  animation: fadein 2s;
+  -moz-animation: fadein 2s; /* Firefox */
+  -webkit-animation: fadein 2s; /* Safari and Chrome */
+  -o-animation: fadein 2s; /* Opera */
+}
+
+@keyframes fadein {
+  from {
+    opacity:0;
+  }
+  to {
+    opacity:1;
+  }
+}
+@-moz-keyframes fadein { /* Firefox */
+  from {
+    opacity:0;
+  }
+  to {
+    opacity:1;
+  }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+  from {
+    opacity:0;
+  }
+  to {
+    opacity:1;
+  }
+}
+@-o-keyframes fadein { /* Opera */
+  from {
+    opacity:0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .container .headerSection {