Header: Make vue component loading a bit more subtle with a css anima…

…tion

This is a follow-up to #4123.  To my eye, there is still some prominent flashing when
the header Vue component loads.  This commit attempts to make it a bit more subtle
by fading it in with a CSS animation.

app/javascript/orangelight/vue_components/orangelight_header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container header-container">
     <lux-library-header app-name="Catalog" abbr-name="Catalog" app-url="/" theme="dark">
       <lux-menu-bar type="main-menu" :menu-items="menuItems" @menu-item-clicked="handleMenuItemClicked"></lux-menu-bar>
     </lux-library-header>
@@ -63,3 +63,13 @@ function handleMenuItemClicked(event) {
   }
 }
 </script>
+<style>
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.header-container {
+  animation: fadeIn 0.3s;
+}
+</style>