diff --git a/src/app.css b/src/app.css
index efcfe12a..ffd83760 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1020,7 +1020,7 @@ button.carousel-dot:is(.active, [disabled].active) {
   border-radius: 8px;
   box-shadow: 0 3px 6px var(--drop-shadow-color);
   text-align: left;
-  animation: appear 0.15s ease-in-out;
+  animation: appear-smooth 0.15s ease-in-out;
   width: 16em;
   max-width: 90vw;
   overflow: hidden;
diff --git a/src/index.css b/src/index.css
index 70a017af..cd097eb5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -306,6 +306,17 @@ code {
   }
 }
 
+@keyframes appear-smooth {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;