Add search results error message animation

src/features/search/views/SearchResultsView.vue

@@ -52,6 +52,7 @@ searchQueryModel.value = props.searchQuery;
     border-radius: 28px;
     text-align: center;
     background-color: #f7f7f7;
+    animation: fade-in 0.8s ease-out;
     height: var(--error-message-height);
     display: flex;
     justify-content: center;
@@ -67,4 +68,18 @@ searchQueryModel.value = props.searchQuery;
         width: 100%;
     }
 }
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    10% {
+        opacity: 0;
+        transform: scale(1.02);
+    }
+    100% {
+        opacity: 100;
+        transform: scale(1);
+    }
+}
 </style>