Add search results error message animation

2026-05-11 00:11:04 +02:00
parent 4d5ddfd7ea
commit 587a97fa03
1 changed files with 15 additions and 0 deletions
@@ -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>