fix: enhance transition effects for sidebar links and video elements

frontend/src/tailwind-in.css

@@ -21,7 +21,7 @@
 }
 
 #sidebar-main .sidebar-link, #sidebar-footer .sidebar-link, #sidebar-main .sidebar-dropdown>h2{
-    @apply block py-2 px-4 hover:bg-gray-700;
+    @apply block py-2 px-4 hover:bg-gray-700 transition duration-300;
 }
 #sidebar-main .sidebar-dropdown .sidebar-link {
     @apply pl-8;

web/public/css/styles.css

@@ -634,6 +634,11 @@ video {
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
 }
 
 #sidebar-main .sidebar-link:hover, #sidebar-footer .sidebar-link:hover, #sidebar-main .sidebar-dropdown>h2:hover {