diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index 0eb4e56..50fed1d 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -2,14 +2,16 @@
 <div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
      _="on change from #transactions-list or htmx:afterSettle from window
           if no <input[type='checkbox']:checked/> in #transactions-list
-            add .tw-hidden to #actions-bar
+            add .slide-in-bottom-reverse then settle
+            then add .tw-hidden to #actions-bar
+            then remove .slide-in-bottom-reverse
           else
             remove .tw-hidden from #actions-bar
             then trigger selected_transactions_updated
           end
         end">
-  <div class="card slide-in-left">
-    <div class="card-body p-2">
+  <div class="card slide-in-bottom">
+    <div class="card-body p-2 d-flex justify-content-between align-items-center gap-3">
       {% spaceless %}
         <div class="btn-group" role="group">
           <button class="btn btn-secondary btn-sm"
diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss
index 5b9c135..b96a958 100644
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -205,3 +205,35 @@
 .flashing {
   animation: flash 1s infinite;
 }
+
+
+.slide-in-bottom {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-bottom-reverse {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2025-1-25 12:30:4
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-bottom
+ * ----------------------------------------
+ */
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(1000px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}