hero animations

static/css/index.css

@@ -1,3 +1,44 @@
+/* Animation */
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fade-bottom {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-left {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-right {
+  0% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 /* ToolTip */
 
 .tooltip {
@@ -19,6 +60,10 @@
     max-width: 100%;
 }
 
+#hero .content {
+    animation: fade-left 1.2s ease-out;
+}
+
 #hero .hero-bottom-svg {
     opacity: 0.5;
     position: absolute;
@@ -49,6 +94,7 @@
 }
 
 #hero .image img {
+    animation: fade-in 1.2s ease-out;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: box-shadow 0.3s;
     padding: 0;
@@ -127,7 +173,6 @@
 }
 
 /* about me */
-
 #about h3 {
     color: var(--text-secondary-color) !important;
 }