From e0fd9a10e844d6d5d6af4d5586aa6bee38ffe2ab Mon Sep 17 00:00:00 2001
From: lukas-heiligenbrunner <lheilige@htl-steyr.ac.at>
Date: Wed, 1 Apr 2020 10:49:45 +0200
Subject: [PATCH] animation in navabar and on experience page

---
 css/experience.css | 18 ++++++++++++++++++
 css/general.css    | 21 +++++++++++++++++++++
 css/home.css       |  1 +
 js/index.js        |  2 ++
 4 files changed, 42 insertions(+)

diff --git a/css/experience.css b/css/experience.css
index 0332b35..d7f1ca5 100644
--- a/css/experience.css
+++ b/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 {
diff --git a/css/general.css b/css/general.css
index 91ddab2..573cfc4 100644
--- a/css/general.css
+++ b/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 {
diff --git a/css/home.css b/css/home.css
index 92ea3c2..f0d65ea 100644
--- a/css/home.css
+++ b/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;
diff --git a/js/index.js b/js/index.js
index f7fb8d8..e586c51 100644
--- a/js/index.js
+++ b/js/index.js
@@ -19,6 +19,8 @@ $(function () {
         if (px) {
             $("#experienceheader").addClass("animationappear600ms");
             $("#experiencecontentcontainer").addClass("animationappear300ms");
+
+            $("#experiencecontentcontainer").addClass("experiencecontaineranimation");
         }
     });