Add fade in animation

Author: kevin-lann

course-matrix/frontend/src/pages/Home/TimetableCard.tsx

@@ -141,7 +141,7 @@ const TimetableCard = ({
           <div
             className={`w-full h-full p-20 flex justify-center rounded-lg ${semesterToBgColor(
               timetable.semester
-            )} cursor-pointer transition-opacity duration-500`}
+            )} cursor-pointer animate-fade-in`}
           >
             <SemesterIcon semester={timetable.semester} />
           </div>
@@ -188,7 +188,7 @@ const TimetableCard = ({
             <div
               className={`w-full h-full p-20 flex justify-center rounded-lg ${semesterToBgColor(
                 timetable.semester
-              )} cursor-pointer transition-opacity duration-500`}
+              )} cursor-pointer animate-fade-in`}
             >
               <SemesterIcon semester={timetable.semester} />
             </div>

course-matrix/frontend/tailwind.config.js

@@ -78,10 +78,15 @@ export default {
             height: "0",
           },
         },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        }
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        'fade-in': 'fade-in 0.4s ease-in-out',
       },
     },
   },