animations also in contact and experience section

css/contact.css

@@ -9,8 +9,17 @@
     background-color: #deebff;
 }
 
+#contactheader{
+    visibility: hidden;
+}
+
+#contactsubheader{
+    visibility: hidden;
+}
+
 .personalcontacts {
     margin-top: 60px;
+    visibility: hidden;
 }
 
 .personalcontacts a {

css/experience.css

@@ -65,12 +65,17 @@
     border-radius: 5mm;
 }
 
+#experienceheader {
+    visibility: hidden;
+}
+
 .ratiobtn {
     display: none;
 }
 
 #experiencecontentcontainer {
     margin-top: 100px;
+    visibility: hidden;
 }
 
 .experiencetitle {

css/general.css

@@ -12,12 +12,24 @@ body, html, #maincontent {
     /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
 }
 
-h1{
+h1 {
     text-transform: uppercase;
-    font-family:  'Open Sans', arial, sans-serif;
+    font-family: 'Open Sans', arial, sans-serif;
     font-weight: bold;
 }
 
+.animationappearnow {
+    animation: textappear 1s 0ms 1 forwards;
+}
+
+.animationappear300ms {
+    animation: textappear 1s 300ms 1 forwards;
+}
+
+.animationappear600ms {
+    animation: textappear 1s 600ms 1 forwards;
+}
+
 /* general definition of a tile */
 .tile {
     height: 80%;
@@ -56,6 +68,34 @@ h1{
     font: bold 15px/1.4 'Open Sans', arial, sans-serif;
 }
 
+/* The animation code */
+@keyframes textfade {
+    from {
+        visibility: hidden;
+        position: relative;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        position: relative;
+        top: 0;
+    }
+}
+
+/* The animation code */
+@keyframes textappear {
+    from {
+        visibility: hidden;
+        opacity: 0;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        opacity: 1;
+        top: 0;
+    }
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
 

css/home.css

@@ -26,7 +26,7 @@
     color: #78ffd9;
 
     visibility: hidden;
-    animation: textfade 1s 900ms 1 forwards ;
+    animation: textfade 1s 900ms 1 forwards;
 }
 
 #homepicture {
@@ -46,7 +46,7 @@
     color: #ced5f6;
 
     visibility: hidden;
-    animation: textfade 1s 600ms 1 forwards ;
+    animation: textfade 1s 600ms 1 forwards;
 }
 
 #subTitleText {
@@ -54,14 +54,14 @@
     color: #bec1d4;
 
     visibility: hidden;
-    animation: textfade 1s 300ms 1 forwards ;
+    animation: textfade 1s 300ms 1 forwards;
 }
 
 #meaningFullSentence {
     width: 40%;
     color: #babccd;
 
-    animation: textfade 1s 0ms 1 forwards ;
+    animation: textfade 1s 0ms 1 forwards;
 }
 
 #homepicture:hover {
@@ -69,20 +69,6 @@
     transition: all 500ms;
 }
 
-/* The animation code */
-@keyframes textfade {
-    from {
-        visibility: hidden;
-        position: relative;
-        top: -20px;
-    }
-    to {
-        visibility: visible;
-        position: relative;
-        top: 0;
-    }
-}
-
 /* height smaller than 720px */
 @media screen and (max-height: 720px) {
     #homepicture {