some animtations

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -15,15 +15,72 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   height: 50px;
   margin-bottom: 10px;
+  background-color: white;
 }
 
+
+.head {
+  overflow: hidden; /* Hides anything that overflows the boundary of this element */
+}
+
+.head h2 {
+  display: inline-block;  /* Ensures that the element can be transformed */
+  white-space: nowrap;    /* Keeps the text on a single line */
+  transform: translateX(-100%); /* Starts the text off-screen to the left */
+  animation: slideIn 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+}
+
+.head div {
+  display: inline-block;  /* Ensures that the element can be transformed */
+  white-space: nowrap;    /* Keeps the text on a single line */
+  transform: translateX(100%); /* Starts the text off-screen to the left */
+  animation: slideInRight 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%); /* Start from off-screen left */
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%); /* End at the normal position */
+    opacity: 100;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%); /* Start from off-screen left */
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%); /* End at the normal position */
+    opacity: 100;
+  }
+}
+
+
+
+
+
 #topbar {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   height: 57px;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
+  animation: slideUp 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+}
 
+@keyframes slideUp {
+  from {
+    transform: translateY(-100%); /* Start from off-screen left */
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%); /* End at the normal position */
+    opacity: 100;
+  }
 }