animation in navabar and on experience page

css/experience.css

@@ -91,6 +91,24 @@
     font-size: large;
 }
 
+/* navbar animation */
+.experiencecontaineranimation :nth-child(2){
+    visibility: hidden;
+    animation: textfade 500ms 600ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(4){
+    visibility: hidden;
+    animation: textfade 500ms 700ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(6){
+    visibility: hidden;
+    animation: textfade 500ms 800ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(8){
+    visibility: hidden;
+    animation: textfade 500ms 900ms 1 forwards;
+}
+
 /* Screen smaller than 600px -- general small width screens */
 @media screen and (max-width: 1200px) {
     #section3 {

css/general.css

@@ -68,6 +68,27 @@ h1 {
     font: bold 15px/1.4 'Open Sans', arial, sans-serif;
 }
 
+/* navbar animation */
+.nav :nth-child(1) a{
+    visibility: hidden;
+    animation: textfade 1s 600ms 1 forwards;
+}
+
+.nav :nth-child(2) a{
+    visibility: hidden;
+    animation: textfade 1s 700ms 1 forwards;
+}
+
+.nav :nth-child(3) a{
+    visibility: hidden;
+    animation: textfade 1s 800ms 1 forwards;
+}
+
+.nav :nth-child(4) a{
+    visibility: hidden;
+    animation: textfade 1s 900ms 1 forwards;
+}
+
 /* The animation code */
 @keyframes textfade {
     from {

css/home.css

@@ -64,6 +64,7 @@
     animation: textfade 1s 0ms 1 forwards;
 }
 
+/* hover effects */
 #homepicture:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
     transition: all 500ms;

js/index.js

@@ -19,6 +19,8 @@ $(function () {
         if (px) {
             $("#experienceheader").addClass("animationappear600ms");
             $("#experiencecontentcontainer").addClass("animationappear300ms");
+
+            $("#experiencecontentcontainer").addClass("experiencecontaineranimation");
         }
     });